In any web page you can add a request for data and convert it to HTML using templates to embed data in real time. No more pointless integrations to daily generate CSV's to sync with publishing. You can even include filtering and aggregating and sorting and paging in the request without extra development.
Example Example
Add a standard webform to any page, create an API and a token with POST rights to add rows to any table. Or edit them using the row ids and PUT rights.
Example
To really be data driven it's not enough to have some data and reports but you need to have all your data available everywhere all at once. You need data available in analytics system for the management dashboards. And PowerBI reports for discovery. And specialist excels for analysis. And available to AI for up to date synthesis. When someone needs new data it's not enough to submit a request for API development. Delivering data needs to take hours, not days or weeks.
Example
It's hard to have your data available where it's needed securely. DBMS security updates require testing to roll out a compromise of client credentials can result in theft and destruction of all data. Instead of having the whole database server open to the internet for connections from all other systems, open it just to our gateway and create APIs for those databases and tables that are needed. Different access tokens can be created for different clients with appropriate rights and network restrictions.
You can use OINO.cloud and HTML templates to directly embed live data to websites without building complex integrations. Below HTMX is used to fetch a set of database rows that are tranlated using a a template to a HTML table. Radio buttons use the same API request just with different sorting options targeting the TBODY with new set of rows.
| Product Name | Unit Price | Units In Stock | Units On Order |
|---|---|---|---|
The table contains HTMX attributes to fetch data top 10 rows from table sorted by one field.
<tbody id="example-htmx-table-rows"
hx-get="https://api.oino.cloud/api/oinocloud/v1/OinoCloudWebsite/DCAE275CDC0C0B27E607E35FB1084A54/Products?oinosqllimit=10&oinosqlorder=UnitPrice%20desc"
hx-headers='{"Accept": "text/html"}'
hx-trigger="load"
hx-target="#example-htmx-table-rows"
hx-swap="innerHTML"
hx-indicator="this"
>
Request has Accept-header text/html by default which tells OINO.cloud API to translate data rows to HTML using the template best matching the request API, method, status code and operation.
<tr>
<td>###ProductName###</td>
<td>###UnitPrice###</td>
<td>###UnitsInStock###</td>
<td>###UnitsOnOrder###</td>
</tr>
Radio buttons contain same attributes with different sorting options and targeting the TBody-element and will update the table with new rows.
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
hx-get="https://api.oino.cloud/api/oinocloud/v1/OinoCloudWebsite/DCAE275CDC0C0B27E607E35FB1084A54/Products?oinosqllimit=10&oinosqlorder=UnitPrice%20desc"
hx-headers='{"Accept": "text/html"}'
hx-trigger="click"
hx-target="#example-htmx-table-rows"
hx-swap="innerHTML"
>
OINO.cloud allows you to easily get real time data from any database where you need it like embedded to a website or imported to Excel or PowerBI.
Page uses the fetch API to get data from Orders-API in JSON format and parses it to format supported by ChartJS.
document.addEventListener('DOMContentLoaded', function() {
fetch('https://api.oino.cloud/api/oinocloud/v1/OinoCloudWebsite/130D3C2C49AC3F59AF8F93D5925EDF48/Orders?oinosqlorder=OrderDate%20asc&oinosqlfilter=(OrderDate)-gt(1997-06-01)', {
headers: {
'Accept': 'text/json'
}
})
.then(response => response.text())
.then(json => {
const ctx = document.getElementById('example-chartjs-canvas').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: parseDataset(json,
row => row.OrderDate.slice(0, 7),
row => row.ShipCountry,
row => parseFloat(row.Freight)
),
In addition to standard HTML forms, OINO.cloud allows you to make dynamic forms that fetch the form options from database.
The form contains a Div-element that triggers on load and fetches the feature request options from API.
<div
hx-get="https://api.oino.cloud/api/oinocloud/v1/OinoCloudWebsite/33733C46960B9B9445A4B518673A12BD/feature_requests?oinosqlfilter=(open)-eq(true)"
hx-headers='{"Accept": "text/html"}'
hx-trigger="load"
hx-target="this"
hx-swap="outerHTML"
hx-indicator="this"
>
Response is again in HTML so the rows get translated to submit buttons for the form by the template with row id as value and name as the caption.
<button class="btn btn-primary m-1" name="feature_request_id" value="###id###" type="submit">###name###</button>
Since API has Hashids enabled the auto increment id is automatically translated to a hashid.
<button class="btn btn-primary m-1" name="feature_request_id" value="aMmLAmnJ7R4PiLWpYA97nI7Z" type="submit">Support for new databases</button>
When you click the buttons, form submits and the template for the API POST request contains acknowledgement and a new HTMX request to fetch the results.
<h4>Thank you for your vote!</h4>
<span>Results:</span>
<ol>
<li
hx-get="https://api.oino.cloud/api/oinocloud/v1/OinoCloudWebsite/898FAE565A9FB9AC77E72144A31EDC83/feature_request_vote_counts?oinosqlaggregate=count(_OINOID_),count(id)&oinosqlorder=id-"
hx-headers='{"Accept": "text/html"}'
hx-trigger="load"
hx-target="this"
hx-swap="outerHTML"
hx-indicator="this"
>
<div class="spinner-border spinner-border-sm htmx-indicator" role="status"></div>
</li>
</ol>
OINO.cloud CSV and JSON output works with typical web data import for data analytics and business intelligence solutions like Excel, PowerBI and Tableau allowing data from any database table to be included in your reports and data desktops and updated in real time.
PowerBI can even automatically recognize foreign keys as data model relations.
With Microsoft Dataverse you can setup a Dataflow to automatically update your data in Power Platform using OINO.cloud.
OINO.cloud supports serializing blob fields as base64 that allows using them as data urls.
| Employee ID | Last Name | First Name | Title | Photo |
|---|
Images in a database blob field can be just serialized to an IMG-tag as a base64 data-url.
<tr>
<td>###EmployeeID###</td>
<td>###LastName###</td>
<td>###FirstName###</td>
<td>###Title###</td>
<td><img id="Photo" name="Photo" style="max-width: 8em;" src="data:image/jpeg;base64,###Photo###" alt="Employee Photo"></td>
</tr>