Features
Data Entry
Add a standard webform to a page, HTML email .
Add a standard webform to a page, HTML email .
Since OINO.cloud knows your datamodel, it can parse input data for supported columns and knows how to serialize them. Just send the necessary fields or extra ones and OINO.cloud knows to update the correct ones. Or use CSV if it's more convenient.
OINO.cloud comes with template engine and supports standard HTML-forms making it easy to use technologies like HTMX for simple web apps that don't need authentication. You can for example create web forms for data submission like feedback/contact forms or even editing .
Since OINO.cloud generates SQL automatically, it can utilize the most powerful DBMS features like filtering and sorting and pagination out of the box. No more waiting for API-project to deliver basic features in order to deliver customer value.
It's hard to have your data available where it's needed securely. Instead of having the whole database open to the internet you can expose individual APIs just where they 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)
),
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.
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 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>