Skip to content

App Model Edtior

Under Construction - Beta (Images broken)

💡 TL;DR - Model-Based App Definitions

The fastest way to develop your custom app is to edit the model file before you alter the created components. Edit the model file to make changes such as:

  1. Choose which Entities / Attributes are exposed, and their order

  2. Specify the templates for Entities and Attributes.

The App Model Editor is a simpler way of editing the App Yaml file.

 

App 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.

The App Model Editor is installed automatically in the Manager (system/app_model_editor). It runs on a different port, so you can run it at the same time as your app.

 

1. Run > Prepare

Use the Run Config as shown below:

ame-prepare

2. Run > Start Server

Execute Run Config > Start Server. This starts an API Logic Server.

3. Run > Start

Execute Run Config > Start. This starts the App Model Editor (an Ontimize App).

4. Open in the Browser

Browse to http://localhost:4298

ame-browse

5. Create New yaml entry

The App Model Editor operates by editing a yaml file that represents the App Model.

Create a new entry:

ame-new

6. Upload

And upload your app_model.yaml file to the server.

ame-upload

7. Process Yaml

The process button will replace all the Entities, Attributes, and Relationships with the uploaded content.

process-yanl

8. Edit Model

Edit your Entities, Attributes and Relationships using the various screens.

ame-edit

9. Process or Download

The big Process Yaml button will take the 'original content' and process this into entities, attributes, and relationships. Once you have edited these values, use the download flag (and save) to populate the downloaded content box.

ame-download

10. Copy to your app

Copy the downloaded yaml file to your ontimize app_model.yaml project, as shown in the screenshot below.

ame-copy

11. Rebuild

Rebuild your Ontimize app using the command line below.

als app-build --app=${name_of_ontimize_app}

ame-rebuild

 

Ontimize app_model.yaml

The app_model.yaml file is created during the "app-create" or "create" phase and is based on the react-admin ui/admin.yaml file. Each entity, column, and tab_group is exposed with additional metadata. When the Ontimize "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 'true' - 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 (all columns are true by default).

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}
    title: {title}
    info_list: {Html}
    group: menu_group 
    columns:
        enabled: true
        exclude: false
        label: {Label}
        name: {Attribute}
        required: false
        search: false
        sort: false
        template: {template}
        type: {DataType}
        visible: true
        default: 'some string'
    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")

Entity Fields

field Description
Entity name name of API endpoint {{ entity }}
Title display name used for {{ title }}
Primary Key array of primary keys {{ primaryKeys }}
Favorite used for list-picker display
Mode tab or dialog style {{ editMode }}
Menu Group used to organize entity into side bar menu groups
Exclude if true - skip this API endpoint in the first page generation
home_template This is the grid or home template used for the Entity
detail_template This is the drill down page from home for each row - it can include relationships (tabgroup)
new_template This template is used to insert new rows into the selected Entity

Attribute Fields

Use the Ontimize editor to change the label, tooltip, exclude selected attributes, include attribute in the search or sort, enable or mark fields as required, and include visible in the home table display.

field Description
Entity Name name of api endpoint (case sensitive)
Attribute name of API attribute {{ attr }}
Title label used for this attribute {{ label }}
Template Name column template (used by template pick list)
Search is this field included in search
Sort is this field included in sort
Required is this field marked as required
Excluded exclude this attribute from detail/new/home pages
Visible is this attribute visible on home table {{ visibleColumns }}
DataType the internal datatype (do not change)
Tooltip hover value for the attribute
Default Value string value to show on new page

Relationship Fields (aka TabGroup)

Use the Ontimize editor to exclude tab on detail page (tomany) or change the tile used to display. |field|Description| :------|:---------------| |Entity Name|name of api endpoint| |Tab Entity|the name of the other end of the relationship| |Direction|toone (to parent - used by list_picker) or tomnay (to children - used by tab panel)| |Relationship name|defined in SQLAlchemy database/models.py| |label|Tab Display name| |Exclude|skip this relationship for all tabs and lookups| |Foreign Keys|array of values (do not change)|

Global Settings

These values are injected into the various entity and attribute to provide and set global values. New values will be added for any templates created.

field Description
Include Translation set to true and then do an app-build to generate Spanish translation (assets/Ii8n/es.json)
Currency Symbol set for locale $

Existing Column Templates

These templates can be found in the directory ui/app/templates and can be modified or cloned. When the app-build is invoked these local templates are used first (then the global system templates are used).

    ("checkbox", "o_checkbox.html"),
    ("check_circle", "check_circle_template.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")