HTML / JavaScript

Web Development

SDK Web UI

The SDK Web UI enables easy to use markup-based browser development with the data cached, always up to date, and available inside the web browser.

Develop applications that are deployed and accessible through a public internet domain or applications that run inside the database. Include and reuse HTML, CSS, JavaScript or external APIs when building applications.

Building web applications becomes a breeze with the help of the SDK Web UI powered by XIOS/3.

Web UI

Code examples

Create an empty moveable window within a web browser tab
<view name="aw01" title="aw apps list" icon="icon://rocket">
  <panel name="MainPanel" type="rows">
    <label>My Application Library</label>
  </panel>
</view>

Result

The short code above will give a view with the name aw01 and displays the title "aw apps list".

It can be used as a template to start adding components to.

Note how the value of the attribute title from line 1 and as well as the label element content text from line 3 of the code above appears in the resulting window.

share
A window with a grid component configured to understand a database result set
<view name="aw02" title="aw2" icon="icon://balloons">
  <panel name="MainPanel" type="rows">
    <label>My Application Library</label>
    <grid name="appsGrid">
      <!-- Teach grid how to interpret the data it is bound to -->
      <row match="db:object">
        <column name="subjectCol" match="@name" display="substring-before(.,'.xml')" label="Name" filter="true" width="140"/>
        <column name="dateCol" match="@updated" display="." label="Updated (UTC)" filter="true" width="140"/>
      </row>
    </grid>
  </panel>
</view>
Program logic for real-time binding of database result to the grid above
<process name="aw2_process">
  <trigger view="aw2" event="Loaded" step="init"/>
  <step id="init">
    <operation name="bind" value="home://Applications">
      <component view="aw2" name="appsGrid"/>
    </operation>
  </step>
</process>

Result

View has the name aw02 while the title is aw2. It can be used for showing the container content in a grid layout.

Applications are built using the Model View Controller (MVC) design pattern, where the View is the View (can be windows or full browser tab applications), the Model is data returned from the database like a database result or an object, the Controller is what is defined as the Process and works like a glue to connect JavaScript built web components used in the View with the database and external API calls.

Note the title, label and the column label from the view part of the code and how they appear in this window.

When clicking on a grid column label, the rows will be sorted in ascending / descending order indicated by an down / up triangle.

share

Create

Create your first UI app using a template in the database application section.

It will include all the calls needed to bind to your CloudBackend database from within the application.

create-app

Edit

Edit on-line in the UI to tailor your web app and data to your specification. Pretty print and syntax highlighting makes it easier to get an overview of the content.

Use the extension CloudBackend for Visual Studio Code for development on your local computer. It also provides integration of IntelliSense for code completion and synchronization with the sourcecode in the cloud account.

edit

Themes

Easily change application design by changing the UI theme, to provide different look and feel for the users.

Choose from a set of themes including dark, light, colored, opaque and more.

themes

Interactive test and debuging

Create your own applications using a browser based UI and run them instantly in the database.

Edit, debug and run in your browser.

Inspect, configure and delete test data in the database CLI.

interactive

MVC architecture

Full separation of Model — View — Controller of an application.

Applications listen to data changes and syncs inputs from multiple sources.

Program logic on client-side enables offline-first applications that continue to work even if intermittently connected to the Internet.

The declarative nature of this high level language will enable secure and fast AI powered application development.

xml-platform

Built-in features

  • Identity aware data access control by CloudBackend at a granular level.
  • Transaction manager enables collaboration and a simultaneous editing across multiple connected units and users.
  • Listens to data changes at the cloud service to allow instant update propagation.
  • Hides the asychronous communication with the cloud service.

toolbox

Instant SaaS deployment

Your ready web based application can by a few clicks be deployed to a separate URL where it is made available as a SaaS to customers and their users. User management with password recovery is included in the service.
See more

Seamless exchange of shared data between the browser UI and other client platforms.
See more

Cross-platform experience

More information

Tutorials SDK Web UI Documentation Account