Skip to content

Ontimize Overview

Under Construction - Beta

💡 TL;DR - Front Office App Dev

To complement the Admin App, API Logic Server can automatically create a 'starter kit' Angular app, using Ontimize, a proven app framework. This approach provides the features outlined in Custom Web Apps:

  1. Faster and simpler automated creation: the system creates a default app model, and uses that to create a default app, in seconds.

  2. Simpler customization: it is orders of magnitude simpler to tweak the properties of a generated app than to create the app by hand. You can customize at 2 levels:

    a. The generated app for full control: you can edit the generated app (html, typescript, css).

    b. The app model: the app is generated from a yaml model that designates the components for tables (grid, card, tree, dialog) and fields (text, image, combo, etc). You can modify the yaml model to rebuild the app.

This technology is currently in preview state - not ready for production. Please contact us if you would like to try it, and provide feedback.

 

Ontimize - Angular Starter Kit

What is Ontimize Web? See the Playground Ontimize Web site:

Ontimize Web is web application framework based on Angular for building business software. Ontimize Web makes use of Angular framework and its UI Component framework (Angular Material) to provide a set of reusable, well-tested and accessible components apart from a number of standard services and functionalities. This includes a wealth of rich UI components (editable grid, graph, tree, etc).

 

API Logic Server Integration

While a separate product, Ontimize is highly integrated with API Logic Server:

  1. Unified Database: driven by the same Data Model, and underlying JSON:API / logic
  2. Unified Repository: Artifacts are files stored in your project directory for unified source, and managed by any standard IDE
  3. Shared Dev Server: the API Logic Server serves the API, the Admin App, and the Ontimize App. This simplifies development

It should be possible for users with limited Python, Flask, SQLAlchemy, JavaScript technology (npm build, etc), or Ontimize knowledge to
1. Create a backend API
2. Declare rules for multi-table derivations and constraints
3. Create a front office Ontimize app, and
4. Make HTML UX page customizations

As you can see below, you are no longer limited to simple master/detail screens:

  1. A Chart (via the hamburger window)

Ontimize Chart

  1. A nested grid example below which nests an Item grid within an Order grid:

Ontimize Nested Grid

 

Ontimize Components

Components (like nested grid) are a key element. As you can see from the grid component, using a component means you provide a combination of html, css and typescript. There are analogous components for cards, trees, dialogs, graphs, charts, maps and fields (text, image, combo, etc).

 

Concepts: Templates, Models

Each component has its own unique html code (including properties), css and typescript. So, changing from a list to a grid would be a complex task.

So, API Logic Server introduces a template-based application model:

  • Template: a macro-expansible version of a template, bundling its html, css and typescript. The template is a 'generation ready' component.

  • Model: a YAML file that designates the templates for tables (grid, card, tree, dialog) and fields (text, image, combo, date, currency, etc). The creation process macro-expands the designated templates, creating the full app, which you can then customize.

So, typical dev cycle would be to tune the model to designate the templates,
then fine-tune the generated app by editing components.

Templates are created into your project:

models and templates

 

Custom App Procedures

A default Ontimize app is created automatically when you create projects with security. You can also create additional apps using the als app-create as described below.

 

1. Create Project

One way is to create an ApiLogicServer project, specifying --auth-provider-type=sql:

als create --project_name=ApiLogicProject --db-url= --auth-provider-type=sql

This creates a project from your database (here, the default sample), which you can open and execute in your IDE. It includes an API, the Admin App, and the default custom app.

Initially, you may wish to skip to step 2 to run the default custom app.

 

  - Default App Created

If you create your app with authorization, a default Ontimize app will be created as a ui/app directory, with a full Ontimize default app.

 

  - Parallel Logic/API Dev

At this point, distinct dev teams can safely proceed in parallel:

  • backend: develop logic and custom APIs (e.g., for application integration)
  • ui: proceed as described below

As noted earlier:

  • logic is automatically factored out of ui code (in particular, not in controllers). This increases re-use across apps, and re-use for integration

  • ui dev is not dependent on server api creation -- JSON:APIs are self-serve, so ui developers are not blocked by backend api

 

2. Run

Execution is standard to Ontimize (assumes the installation of NPM and NodeJS).

cd ui/app
npm install
npm start

Browse to localhost:4299, and login as user: admin password:p.

 

3. Customize

The simplest way to introduce rich components is to specify them in the app model, and the rebuild the app. Iterate this process until you have the right templates, then customize the created app.

customize

3a. Enable Security

To enable Keycloak - in the ui/app/admin_model.yaml file - go to the settings/style_guide and change these values and use the app-build to activate keyloak.

use_keycloak: true
keycloak_url: http://localhost:8080
keycloak_realm: kcals
keycloak_client_id: alsclient

  Enable keycloak for the ALS server use als add-auth --provider-type=keycloak  

3b. Edit App Model

Edit to remove unwanted entities, order columns, set templates, etc.

You can edit the yaml file directly, or use the provided model editor gui.

Show me how -- Edit Model

 

app_create

3c. Rebuild App

Then, rebuild your application:

ApiLogicServer app-build --app=app

3d. Customize Created App

This will the the data model to build out the Ontimize app. It's executable.

You can then use your IDE or other tooling (e.g., Ontimize CLI) to edit the artifacts to customize the look and feel.

Then, repeat 2. Run, above.

Show me how -- Customize Application

 

app_create

 

4. Create Additional Apps

With the project open in your IDE, use the terminal window to create a new Ontimize application in a named directory under 'ui':

ApiLogicServer app-create --app=app2
cd ui/app2
npm install

This creates ui/app2/app_model.yaml and installs the Ontimize 'seed' NodejS package and dependent node_modules.

Appendices

Yaml Model Editor

The Yaml editor allows the developer the ability to manage yaml files for editing using an Ontimize built application. Use the "Manage yaml files" New - to add your yaml file and then click upload to populate the screens with entities, attributes, and tab groups. Once complete, use the download flag to export the yaml to the 'ui' directory (ui/admin_model_merge.yaml) and compare to your original admin_model.yaml in the ontimize application folder.

git clone https://github.com/tylerm007/ontimize_yaml_view
cd ontimize_yaml_view

code .
#press F5 to start ApiLogicServer

cd ui/yaml
npm install
npm start

#go to http://localhost:5655 (user: admin password: p)

Ontimize app_model.yaml

The app_model.yaml file is created during the "app-create" or "create" phase and is based on the ui/admin.yaml file. Each entity, column, and tab_group is exposed with additional metadata. When the "app-build" is invoked, these properties are used to populate the templates (html, scss, and typescript) for each page. If the "exclude" flag is set to 'false' - the entity or attribute will be excluded from the page. The "visible" column flag only applies to the Home table columns appearing in the grid.

entities:
  {EntityName}
    detail_template: detail_template.html
    home_template: home_template.html
    new_template:: new_template.html
    favorite: {SomeAttribute}
    mode: tab | dialog
    primary_key: 
        {SomeAttribute(s)}
    type: {Entity}
    info_list: {Html}
    columns:
        enabled: true
        exclude: false
        label: {Label}
        name: {Attribute}
        required: false
        search: false
        sort: false
        template: {template}
        type: {DataType}
        visible: true
    tab_groups:
        direction: tomany | toone
        exclude: false
        fks:
            - {SomeAttribute(s)}
        label: {Label}
        name: {Entity Relationship}
        resource: {Entity}
settings:
  style_guide:
    include_translation: false
    use_keycloak: false

Existing Column Templates

    ("checkbox", "o_checkbox.html"),
    ("combo", "o_combo_input.html"),
    ("currency", "currency_template.html"),
    ("date", "date_template.html"),
    ("email", "email_template.html"),
    ("file", "file_template.html"),
    ("html", "html_template.html"),
    ("integer", "integer_template.html"),
    ("list", "list-picker.html"),
    ("nif", "o_nif_input.html"),
    ("password", "password_template.html"),
    ("percent", "percent_template.html"),
    ("phone", "phone_template.html"),
    ("real", "real_template.html"),
    ("text", "text_template.html"),
    ("textarea", "textarea_template.html"),
    ("time", "time_template.html"),
    ("timestamp", "timestamp_template.html"),
    ("toggle", "o_slide_toggle.html")