OINO.cloud supports HTML templates that allow you to easily turn any data to HTML and embed in any web page. No more complex integration projects to daily export data files and sync between systems that need fixing every time data changes. Just create a template with necessary data fields and import it in a page using javascript. You can even include filtering and aggregating and sorting parameters in the url without extra development.
Example ExampleOINO.cloud supports standard HTML forms and allows you to enable user data input by just adding a form in any page. Whether you want to collect customer signups, add voting or submit reviews, you just need to use an OINO.cloud POST-token url as the form action. You can even edit existing data and submit files and images to database blob fields.
ExampleTo 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.
ExampleManaged cloud databases are convenient but their default configuration is having the SQL-protocol open to internet and every client having same access rights. This means that compromise of any client can lead to theft and destruction of all data. With OINO.cloud you can have only a single whitelisted gateway open and easily configure each client with just the necessary rights.
GuideYou 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"
>
Guide: Order
Guide: Limit
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)
),
Guide: Order
Guide: Filter
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>
Guide: Limit
Guide: Order
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>