Application screen configuration

Eximee applications can affect the appearance and layout of the views displayed in Eximee Dashboard. Configuration is done by defining settings in the application component, in the “Application screens” section.

In this section, you should prepare a script compatible with the provided API, which allows you to customize Eximee Dashboard views for a given application. As part of the configuration, you can, among other things:

specify which tabs should be visible,
define the display order of tabs,
customize the content shown in individual tabs,
define the appearance of the header for a given process.

Application screens are configured by implementing a configuration function that returns a configuration object ProcessConfig.

e.g.

function call(context) {
    return processConfigV1()
        .header(
            headerV1()
                .title("Loan application")
                .section(
                    headerSectionV1()
                        .key("Customer")
                        .label("123123")
                )
            )    
        .userTaskTab("Loan application", 
            processTabV1()
                .id("loan_application")
                .name("Loan application")
                .type("usertask")
                .data(
                    userTaskTabV1()
                        .processId(context.processId())
                        .id("loan_application")
                )
            )
};

Application screens configuration is cached on the Eximee Dashboard side. Depending on the environment configuration, changes made in the configuration script may be visible only after a few minutes from the time they are saved.

Configuration API

Below you will find detailed information about the available functions and the way to configure application screens. The following low-code APIs of the Eximee platform are available in configuration scripts:

data-model-api
rest-api
process-api
user-api

In the context of the function call (context) the following methods are available:

context.processId() - returns the process identifier for which the screen is being configured. This is especially useful when defining user task tabs, which must be associated with a specific process.

Fluent style (builder)

The configuration API is available in fluent (builder) style, which means that the configuration object can be built through chained method calls. This makes the configuration readable and easy to extend in subsequent steps.

For example, the configuration can be built both by passing parameters to the function and through successive method calls:

function call(context) {
  return processConfigV1()
    .header(
      headerV1()
        .title("Loan application")
        .section(
          headerSectionV1()
            .key("Customer")
            .label("123123")
        )
    )
    // Process tabs can be set in bulk or added individually:
    .tabs([
      processTabV1().id("details").name("Details").type("details"),
    ])
    .tab(
      processTabV1().id("history").name("History").type("history")
    )
    // Similarly for user task tabs:
    .userTaskTabs({
      loan_application: processTabV1()
        .id("loan_application")
        .name("Loan application")
        .type("usertask")
        .data(
          userTaskTabV1()
            .processId(context.processId())
            .id("loan_application")
        )
    })
    .userTaskTab(
      "next_tab",
      processTabV1().id("next_tab").name("Next tab").type("usertask")
    );
}

In practice:

parameter variant (e.g. processConfigV1(header, tabs, userTaskTabs)) is convenient when you already have complete objects/lists prepared,
fluent variant (processConfigV1().header(...).tab(...).userTaskTab(...)) works better when you build the configuration step by step.

`processConfigV1`

processConfigV1(header, tabs, userTaskTabs)

Creates a process configuration instance. Takes three parameters:

header - process header configuration, you should provide the definition headerV1.
tabs - list of process tabs. You should provide a list of definitions processTabV1.

userTaskTabs - map of user task tabs. Provide a key-value pair, where the key is the identifier of the process user task (user-task) and the value is the definition processTabV1. The tab from this map will always be shown first if the process is currently on the specified user task.

Fluent API:

.header(header) - set the process header
.tabs(tabs) - set the list of tabs at once
.tab(tab) - add a single tab (can be called multiple times)
.userTaskTabs(userTaskTabs) - set the map at once
.userTaskTab(key, tab) - add a single entry (can be called multiple times)

Example:

  processConfigV1(
    headerV1()
      .title("Loan application"),
    [processTabV1().id("details")],
    { loan_application: processTabV1().id("loan_application") }
  )

  processConfigV1()
    .header(
      headerV1()
        .title("Loan application")
    )
    .tabs([
      processTabV1()
        .id("details")
        .name("Details")
    ])
    .userTaskTab(
      "loan_application",
      processTabV1()
        .id("loan_application")
        .name("Loan application")
        .type("usertask")
      )
      .tab(
        processTabV1()
          .id("history")
          .name("History")
          .type("history")
      )
      .userTaskTab(
         "next_tab",
         processTabV1()
           .id("next_tab")
           .name("Next tab")
           .type("usertask")
    );

`headerV1`

headerV1(title, sections)

Creates a process header configuration. Takes two parameters:

title - header title, displayed in Eximee Dashboard.
sections - list of header sections. You should provide a list of definitions headerSectionV1.
Example:
```
  headerV1(
    "Loan application",
    [headerSectionV1().key("Customer").label("123123")]
  )
```

Fluent API:

.title(title) - set the header title
.sections(sections) - set the entire list of sections at once

.section(section) - add a single section (can be called multiple times)

Example:

  headerV1()
    .title("Loan application")
    .section(
      headerSectionV1()
        .key("Customer")
        .label("123123")
    );

`headerSectionV1`

headerSectionV1(label, key, details)

Creates a header section configuration. Takes three parameters:

label - section label, displayed in Eximee Dashboard.
key - section value
details - list of detailed information to be shown in the section's contextual help. You should provide a list of definitions sectionDetailV1.
Example:
```
  headerSectionV1(
    "123123",
    "Customer",
    [sectionDetailV1().key("PESEL").value("12312312312")]
  )
```

Fluent API:

.label(label) - set the section label
.key(key) - set the section content
.details(details) - set the list of additional information

.detail(detail) - add a single piece of information (can be called multiple times)

  headerSectionV1()
    .label("123123")
    .key("Customer")
    .detail(
      sectionDetailV1()
        .key("PESEL")
        .value("12312312312")
    );

`sectionDetailV1`

sectionDetailV1(label, key)

Creates a configuration for detailed information in a header section. Takes two parameters:

label - label of the additional information, displayed in Eximee Dashboard.
key - content of the additional information
Example:
```
sectionDetailV1(
    "PESEL",
    "1111111116"
)
```

Fluent API:

.label(label) - set the label of the additional information
.key(key) - set the content of the additional information
Example:
```
sectionDetailV1()
    .label("PESEL")
    .key("1111111116");
```

Example of a full header configuration

processConfigV1()
    .header(
        headerV1("task")
            .section(
                headerSectionV1("Customer", "777777")
                    .detail(
                        sectionDetailV1("PESEL", "1111111116")
                    )
                    .detail(
                        sectionDetailV1("First name", "Jan")
                    )
                    .detail(
                        sectionDetailV1("Last name", "Kowalski")
                    )
            )
            .section(
                headerSectionV1("Employee", "12333")
                    .detail(
                        sectionDetailV1("Branch", "Branch no. 2 in Ustrzyki Dolne")
                    )
            )
    )

`processTabV1`

processTabV1(id, name, type, permission, data)

Creates a process tab configuration. Takes five parameters:

id - unique tab identifier.
name - tab name, displayed in Eximee Dashboard.
type - tab type, determining its functionality. Available types:
- usertask - user task tab. For this type, in the data field you need to define userTaskTabV1.
- documents - documents tab. For this type, in the data field you need to define documentsTabV1.
- external - external component tab. For this type, in the data field you need to define externalComponentTabV1.
- form- form tab. For this type, in the data field you need to define formTabV1.
- layout - a tab that allows grouping multiple tabs together. For this type, in the data field you need to define layoutTabV1.
- process-details - system tab containing case data
- process-overview - system tab containing process details. BPMN diagram and possible incidents.
- notes - system tab with process notes
permission - optional permission required to display the tab.

data - additional configuration data, specific to the tab type (e.g. userTaskTabV1 for user task tabs) - Tab type definitions.

Example:

  processTabV1(
    "loan_application",
    "Loan application",
    "usertask",
    null,
    userTaskTabV1().processId(context.processId()).id("loan_application")
  )

Fluent API:

.id(id) - set the tab identifier
.name(name) - set the tab name
.type(type) - set the tab type
.permission(permission) - set the required permission
.hidden() - marks the tab as hidden, unavailable to the user

.data(data) - set additional configuration data Example:

  processTabV1()
    .id("loan_application")
    .name("Loan application")
    .type("usertask")
    .data(
      userTaskTabV1()
        .processId(context.processId())
        .id("loan_application")
    );

Example process tab configuration (more tab types in the section Tab type definitions)

processConfigV1()
  .tab(
    processTabV1()
      .id("task")
      .type("form")
      .name("Mortgage loan application")
      .data(
        formTabV1()
          .formId("mortgage_app_br")
      )
  )

`processTabHeaderV1`

processTabHeaderV1(title, standardButtonDisabled, businessSlot)

Creates a process tab header configuration. Takes three parameters:

title - tab title, displayed in Eximee Dashboard.
standardButtonDisabled - optional flag that allows disabling standard buttons (e.g. "Next", "Save") in the tab header, depending on the tab type.
businessSlot - optional configuration that allows embedding a custom web component in the tab header. You should provide the definition webComponentV1. The component will be displayed when standardButtonDisabled will be set to true. A slot will then appear in the place of the standard buttons, in which the component will be embedded.
Example:
```
processTabHeaderV1(
    "Loan application",
    true,
    businessSlot(
        webComponentV1(
            "hipo-buttons",
            [sourceV1("https://example.com/custom-component.js")]
        )
    )
)
```

Fluent API:

.title(title) - set the tab title
.standardButtonDisabled(standardButtonDisabled) - set the flag that disables standard buttons

.businessSlot(businessSlot) - set the additional slot configuration

Example:

processTabHeaderV1()
    .title("Loan application")
    .standardButtonDisabled(true)
    .businessSlot(
        webComponentV1()
          .tag("hipo-buttons")
          .source(sourceV1("https://example.com/another-component.js"))
    );

`webComponentV1`

webComponentV1(name, sources)

Creates a configuration for a custom web component that can be embedded in dedicated places in Eximee Dashboard, e.g. in the tab header (processTabHeaderV1). Takes two parameters:

tag - the HTML tag of the web component.
sources - component sources, specifying where it should be loaded from (e.g. a URL to a JavaScript file). You should provide the definition sourceV1.
Example:
```
webComponentV1(
    "hipo-buttons",
     [sourceV1("https://example.com/custom-component.js")]
)
```

Fluent API:

.tag(tag) - set the component name
.sources(sources) - set the list of component sources

.source(source) - set a single component source

Example:

webComponentV1()
    .tag("hipo-buttons")
    .sources([sourceV1("https://example.com/custom-component.js")])
    .source(sourceV1("https://example.com/another-component.js"));

`sourceV1`

sourceV1(path)

Creates a configuration of the source for a custom web component. Takes one parameter:

path - path to the JavaScript file from which the component should be loaded.
Example:
```
sourceV1("https://example.com/custom-component.js")
```

Fluent API:

.path(path) - set the source path
Example:
```
sourceV1()
    .path("https://example.com/custom-component.js");
```

Tab type definitions

`userTaskTabV1`

userTaskTabV1(processId, id, tabHeader, config, data)

Creates a configuration for a user task tab. Takes five parameters:

processId - process identifier
id - unique tab identifier
tabHeader - optional tab header configuration (definition processTabHeaderV1).
config - additional configuration specific to user task tabs.

data - additional configuration data.

Example:

  userTaskTabV1(
    context.processId(),
    "loan_application",
    processTabHeaderV1().title("Loan application"),
    null,
    { "showClaimButton": "true" }
  )

Fluent API:

.processId(processId) - set the process identifier
.id(id) - set the tab identifier
.tabHeader(tabHeader) - set the tab header
.config(config) - set the additional configuration

.data(key, value) - set additional configuration parameters

Example:

  userTaskTabV1()
    .processId(context.processId())
    .id("loan_application")
    .tabHeader(
      processTabHeaderV1().title("Loan application")
    )
    .data("showClaimButton", "true");

Example configuration of a user task tab:

    processConfigV1()
        .tab(
            processTabV1()
                .id("task")
                .name("Mortgage loan application")
                .type("usertask")
                .data(
                    userTaskTabV1()
                        .processId(context.processId())
                        .id("loan_application")
                        .tabHeader(
                            processTabHeaderV1().title("Loan application")
                        )
                        .data("showClaimButton", "true")
                )
        )

`layoutTabV1`

layoutTabV1(tabs) Creates a tab of type "layout", which allows defining the layout of other tabs. For example, place a web component and an Eximee form side by side. You can specify any number of definitions - the tabs will be placed side by side. The available space will be distributed evenly among all tabs. Takes one parameter:

tabs - list of tabs to be displayed within this "layout" type tab. You should provide a list of definitions processTabV1.
Example:
```
layoutTabV1(
    [
    processTabV1().id("details").name("Details").type("details"),
    processTabV1().id("notes").name("Notes").type("notes")
    ]
)
```

Fluent API:

.tabs(tabs) - set the list of tabs at once

.tab(tab) - add a single tab (can be called multiple times)

Example:

layoutTabV1()
    .tab(
    processTabV1()
        .id("details")
        .name("Details")
        .type("details")
    )
    .tab(
    processTabV1()
        .id("history")
        .name("History")
        .type("history")
    );

Example configuration of a "layout" type tab:

processConfigV1()
    .tab(
        processTabV1()
            .id("layout-tab")
            .name("Mortgage loan application")
            .type("layout")
            .data(
                layoutTabV1()
                    .tab(
                        processTabV1()
                            .id("notes")
                            .name("Details")
                            .type("notes"),
                    )
                    .tab(
                        processTabV1()
                            .id("form")
                            .name("Loan application")
                            .type("form")
                            .data(
                                formTabV1()
                                    .formId("mortgage_app_br")
                            ),
                    )
            )
    )

`formTabV1`

formTabV1(processId, formId, tabHeader)

Creates a configuration for a "form" type tab, which allows embedding a form. Takes three parameters:

processId - identifier of the process to which the tab belongs.
formId - name of the form that should be embedded in the tab.
tabHeader - optional tab header configuration (definition processTabHeaderV1).
Example:
```
formTabV1(
    context.processId(),
    "wniosek_o_kredyt_form",
    processTabHeaderV1().title("Loan application")
)
```

Fluent API:

.processId(processId) - set the process identifier
.formId(formId) - set the form name

.tabHeader(tabHeader) - set the tab header

Example:

formTabV1()
    .processId(context.processId())
    .formId("wniosek_o_kredyt_form")
    .tabHeader(
      processTabHeaderV1().title("Loan application")
    );

Example form tab configuration:

processConfigV1()
    .tab(
        processTabV1()
            .id("layout-tab")
            .name("Client data")
            .type("layout")
            .data(
                layoutTabV1()
                    .tab(
                        processTabV1()
                            .id("form")
                            .name("Client data")
                            .type("form")
                            .data(
                                formTabV1()
                                    .formId("hip_dane_klienta")
                            ),
                    )
            )
    )

`documentsTabV1`

documentsTabV1(groups)

Creates configuration of tab type "documents", which allows displaying documents assigned to the process. Takes one parameter:

groups - list of document groups to be displayed in the tab. You need to provide a list of definitions documentGroupV1.
Example:
```
documentsTabV1([
    documentGroupV1(),
    documentGroupV1()
])
```

Fluent API:

.groups(groups) - set the list of groups at once
.group(group) - add a single group (can be called multiple times)
Example:
```
documentsTabV1()
    .group(documentGroupV1())
    .group(documentGroupV1());
```

`documentGroupV1`

documentGroupV1(documents)

Creates configuration of a document group in the "documents" tab. Takes one parameter:

documents - list of documents to be displayed within this group. You need to provide a list of definitions documentV1.

Example:

documentGroupV1([
  documentV1()
      .name("Loan agreement")
      .source({ url: "https://example.com/umowa.pdf" }),
  documentV1()
      .name("Loan application")
      .source({ url: "https://example.com/wniosek.pdf" })
])

Fluent API:

.documents(documents) - set the list of documents at once

.document(document) - add a single document (can be called multiple times)

Example:

documentGroupV1()
    .document(
        documentV1()
            .name("Loan agreement")
            .source({ url: "https://example.com/umowa.pdf" })
    )
    .document(
        documentV1()
            .name("Loan application")
            .source({ url: "https://example.com/wniosek.pdf" })
    );

`documentV1`

documentV1(name, source, typeName, style)

Creates configuration of a single document in a document group. Takes four parameters:

name - document name, displayed in Eximee Dashboard.
source - document source, specifying where it should be fetched from (e.g. PDF file URL).
typeName - optional document type name, which can be used for additional categorization.
style - optional style configuration for displaying the document. Available document styles:
- primary
Example:
```
documentV1(
    "Umowa kredytowa",
    "https://example.com/umowa.pdf",
    "loan",
    "primary"
)
```

Fluent API:

.name(name) - set the document name
.source(source) - set the document source
.typeName(typeName) - set the document type name

.style(style) - set the style configuration

Example:

documentV1()
    .name("Loan agreement")
    .source({ url: "https://example.com/umowa.pdf" })
    .typeName("loan")
    .style({ icon: "pdf", color: "blue" });

Example documents tab configuration:

processConfigV1()
    .tab(
        processTabV1()
            .id("documents-tab")
            .name("Documents")
            .type("documents")
            .data(
                documentsTabV1()
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Loan agreement")
                                    .source({url: "https://example.com/umowa.pdf"})
                                    .typeName("loan")
                                    .style('primary')
                            )
                            .document(
                                documentV1()
                                    .name("Insurance agreement")
                                    .source({url: "https://example.com/umowa_ubezpieczenia.pdf"})
                                    .typeName("insurance")
                                    .style('secondary')
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Loan application")
                                    .source({url: "https://example.com/wniosek.pdf"})
                                    .typeName("application")
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Addendum to the agreement")
                                    .source({url: "https://example.com/aneks.pdf"})
                                    .typeName("addendum")
                            )
                    )
            )
    )

`externalComponentTabV1`

externalComponentTabV1(data, tabHeader, config)

Creates configuration of tab type "external", which allows embedding an external component. Takes three parameters:

tabHeader - optional tab header configuration (definition processTabHeaderV1).
config - web component configuration to be embedded in the tab. You need to provide a definition webComponentV1.
data - configuration data specific to the embedded component.

Example: javascript externalComponentTabV1( { url: "https://example.com" }, processTabHeaderV1("External component"), webComponentV1("custom-component", [sourceV1("https://example.com/custom-component.js")]) )

Fluent API:

.setData(data) - set the entire configuration map for the component at once
.data(key, value) - set a single configuration entry for the component (can be called multiple times)
.tabHeader(tabHeader) - set the tab header

.config(config) - set the additional configuration

Example:

externalComponentTabV1()
  .data("url", "https://example.com")
  .tabHeader(
      processTabHeaderV1("External component")
  )
  .config(
      webComponentV1("custom-component")
          .source(sourceV1("https://example.com/custom-component.js"))
  )

Example configuration of external component tab

processConfigV1()
    .tab(
        processTabV1()
            .id("component")
            .name("External component")
            .type("external")
            .data(
                externalComponentTabV1()
                    .data("url", "https://example.com")
                    .tabHeader(
                        processTabHeaderV1("External component")
                    )
                    .config(
                        webComponentV1()
                            .tag("my-web-component")
                            .source(sourceV1("https://example.com/custom-component.js"))
                    )
            )
    )

Hiding system tabs

By default, the system presents the tabs of process instance details:

the current user task form,
process data,
current state diagram,
execution history.

The specified tabs are generated automatically and displayed based on the permissions of the logged-in user.

It is possible to hide some system tabs by returning an overridden configuration for them. It is possible to create a tab with an id matching the system tab id and override its configuration by calling on it the method .hidden().

For example, to hide three system tabs, you can return the configuration:

return processConfigV1()
    .tab(processTabV1().id("process-details").hidden())
    .tab(processTabV1().id("history").hidden())
    .tab(processTabV1().id("process-overview").hidden())

The specific tabs with their ids are described in the next section.

System tabs of the process instance

tab type

possibility to hide

current user task form

no, always visible if there is a task

process-details

process data summary

yes

process-overview

current process state diagram

yes

history

history of changes in the process

yes

PreviousConfiguration

NextPermissions

Last updated 2 months ago

Was this helpful?