Widget - Free Html (Beta)

Free Html widget allows you to create any element using HTML and Scripting (JavaScript). It is very similar to Html input.

It's still in Beta. Functionality and behavior may change.

The widget is offered only to users with the developer level switched on.

Widget settings

1) Label - enter the name of the widget

2) HTML - any valid HTML including iframes. It is recommended to use TBD-RANDOM-ID variable to make sure your elements are uniquely identified.

	<h1 style="margin: 20px">User list</h1>
    <p id='{{TBD-RANDOM-ID}}-my-p'>
     Loading ...
    </p>

3) Scripting Editor (JavaScript) - init script for the widget. Use for loading data etc.

	let options = {};
    let result = await doo.table.getData('User', options);
    const elem = document.getElementById('TBD-RANDOM-ID-my-p');
    let widgetBody = 'Logins:'
    for (let row of result.data) {
      widgetBody += '<br>' + JSON.stringify(row.fields.login)
    }
    elem.innerHTML =widgetBody;

Styles - you can use cascading styles (CSS) to style HTML. Just add the <style> element to your HTML. Always use your own prefix for CSS selectors (so that your styles don't mix with Tabidoo's styles). See example:

<style>
    	.my-prefix-label {
    		color: red;
    	}
    	
    	.my-prefix-input {
    		border-radius: 16px;
    	}
    	...
</style>
<label class="my-prefix-label">Firstname</label>
...

Under Widget appearance, there is an option Refresh after record changed. When this is selected, the widget init script runs on every row changed. Selected rows can be found in doo.environment.currentApplication.currentTable.selectedRecords

Do not forget to save by clicking on "Done" and afterwards "Save dashboard" in the upper right corner"!