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:

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

5. Create New yaml entry

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

Create a new entry:

6. Upload

And upload your app_model.yaml file to the server.

7. Process Yaml

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

8. Edit Model

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

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.

10. Copy to your app

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

11. Rebuild

Rebuild your Ontimize app using the command line below.

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

 

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")