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

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-48b52c5013d81246534d6e9e71b934b4f68134f0%2Fapp-screens.png?alt=media)

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,
* set the order in which tabs are displayed,
* 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.

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

{% hint style="info" %}
Application screen configuration is cached on the Eximee Dashboard side. Depending on the environment configuration, changes made in the configuration script may only become visible a few minutes after they are saved.
{% endhint %}

## Configuration API

Below you will find detailed information about the available functions and how to configure application screens. The following Eximee platform low-code APIs 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 identifier of the process for which the screen is being configured. This is especially useful when defining user task tabs that 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 either by passing parameters to a function or by successive method calls:

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

In practice:

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

### `processConfigV1`

`processConfigV1(header, tabs, userTaskTabs)`

Creates an instance of the process configuration. It takes three parameters:

* `header` - process header configuration, you should provide a definition of `headerV1`.
* `tabs` - list of process tabs. You should provide a list of definitions of `processTabV1`.
* `userTaskTabs` - map of user task tabs. You should provide a key-value pair, where the key is the identifier of the process user task (user-task), and the value is the definition of `processTabV1`. The tab from this map will always be displayed first if the process is currently at 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:

  ```javascript
    processConfigV1(
      headerV1()
        .title("Credit application"),
      [processTabV1().id("dane")],
      { wniosek_o_kredyt: processTabV1().id("wniosek_o_kredyt") }
    )  
  ```

  ```javascript
    processConfigV1()
      .header(
        headerV1()
          .title("Credit application")
      )
      .tabs([
        processTabV1()
          .id("dane")
          .name("Data")
      ])
      .userTaskTab(
        "wniosek_o_kredyt",
        processTabV1()
          .id("wniosek_o_kredyt")
          .name("Credit application")
          .type("usertask")
        )
        .tab(
          processTabV1()
            .id("historia")
            .name("History")
            .type("history")
        )
        .userTaskTab(
           "kolejna_zakladka",
           processTabV1()
             .id("kolejna_zakladka")
             .name("Next tab")
             .type("usertask")
      );

  ```

### `headerV1`

`headerV1(title, sections)`

Creates the process header configuration. It takes two parameters:

* `title` - header title, displayed in Eximee Dashboard.
* `sections` - list of header sections. You should provide a list of definitions of [`headerSectionV1`](#headersectionv1).

  Example:

  ```javascript
    headerV1(
      "Credit 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:

  ```javascript
    headerV1()
      .title("Credit application")
      .section(
        headerSectionV1()
          .key("Customer")
          .label("123123")
      );
  ```

#### `headerSectionV1`

`headerSectionV1(label, key, details)`

Creates the header section configuration. It takes three parameters:

* `label` - section label, displayed in Eximee Dashboard.
* `key` - section value
* `details` - list of detailed information to be displayed in the section's contextual help. You should provide a list of definitions of [`sectionDetailV1`](#sectiondetailv1).

  Example:

  ```javascript
    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)

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

#### `sectionDetailV1`

`sectionDetailV1(label, key)`

Creates the configuration of detailed information in the header section. It takes two parameters:

* `label` - label of the additional information, displayed in Eximee Dashboard.
* `key` - content of the additional information

  Example:

  ```javascript
  sectionDetailV1(
      "PESEL",
      "1111111116"
  )
  ```

Fluent API:

* `.label(label)` - set the label of the additional information
* `.key(key)` - set the content of the additional information

  Example:

  ```javascript
  sectionDetailV1()
      .label("PESEL")
      .key("1111111116");
  ```

Example of a full header configuration

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

```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-519051f64bc5d15710e5d1a8a5a0c5fc2e0dbd8c%2Fapp-screens-header.png?alt=media)

### `processTabV1`

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

Creates the process tab configuration. It takes five parameters:

* `id` - unique tab identifier.
* `name` - tab name, displayed in Eximee Dashboard.
* `type` - tab type, defining its functionality. Available types:
  * `usertask` - user task tab. For this type, the data field must define [`userTaskTabV1`](#usertasktabv1).
  * `documents` - documents tab. For this type, the data field must define [`documentsTabV1`](#documentstabv1).
  * `external` - external component tab. For this type, the data field must define [`externalComponentTabV1`](#externalcomponenttabv1).
  * `form`- form tab. For this type, the data field must define [`formTabV1`](#formtabv1).
  * `layout` - a tab allowing multiple tabs to be grouped together. For this type, the data field must define [`layoutTabV1`](#layouttabv1).
  * `process-details` - system tab containing case data
  * `process-overview` - system tab containing process details. BPMN diagram and any 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](#definicje-typow-zakladek).

  Example:

  ```javascript
    processTabV1(
      "wniosek_o_kredyt",
      "Credit application",
      "usertask",
      null,
      userTaskTabV1().processId(context.processId()).id("wniosek_o_kredyt")
    )
  ```

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
* `.data(data)` - set additional configuration data Example:

  ```javascript
    processTabV1()
      .id("wniosek_o_kredyt")
      .name("Credit application")
      .type("usertask")
      .data(
        userTaskTabV1()
          .processId(context.processId())
          .id("wniosek_o_kredyt")
      );
  ```

Example of process tab configuration (more tab types in the section [Tab type definitions](#definicje-typow-zakladek))

```javascript
processConfigV1()
  .tab(
    processTabV1()
      .id("task")
      .type("form")
      .name("Mortgage application")
      .data(
        formTabV1()
          .formId("wniosek_hipo_br")
      )
  )
```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-dc2569c52ef37b3f447d70351907a60ad2fb0216%2Fapp-screens-process-tab.png?alt=media)

### `processTabHeaderV1`

`processTabHeaderV1(title, standardButtonDisabled, businessSlot)`

Creates the configuration of the process tab header. It 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 a definition of [`webComponentV1`](#webcomponentv1). The component will be displayed when `standardButtonDisabled` will be set to `true`. In place of the standard buttons, a slot will then appear in which the component will be embedded.

  Example:

  ```javascript
  processTabHeaderV1(
      "Credit 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 disabling standard buttons
* `.businessSlot(businessSlot)` - set the additional slot configuration

  Example:

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

### `webComponentV1`

`webComponentV1(name, sources)`

Creates the configuration of a custom web component that can be embedded in dedicated places in Eximee Dashboard, e.g. in the tab header ([`processTabHeaderV1`](#processtabheaderv1)). It takes two parameters:

* `tag` - HTML tag of the web component.
* `sources` - component sources, specifying where it should be loaded from (e.g. URL to a JavaScript file). You should provide a definition of [`sourceV1`](#sourcev1).

  Example:

  ```javascript
  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:

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

#### `sourceV1`

`sourceV1(path)`

Creates the source configuration for a custom web component. It takes one parameter:

* `path` - path to the JavaScript file from which the component should be loaded.

  Example:

  ```javascript
  sourceV1("https://example.com/custom-component.js")
  ```

Fluent API:

* `.path(path)` - set the source path

  Example:

  ```javascript
  sourceV1()
      .path("https://example.com/custom-component.js");
  ```

## Tab type definitions

### `userTaskTabV1`

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

Creates the configuration of a tab for a user task. It takes five parameters:

* `processId` - process identifier
* `id` - unique tab identifier
* `tabHeader` - optional tab header configuration (definition [`processTabHeaderV1`](#processtabheaderv1)).
* `config` - additional configuration specific to user task tabs.
* `data` - additional configuration data.

  Example:

  ```javascript
    userTaskTabV1(
      context.processId(),
      "wniosek_o_kredyt",
      processTabHeaderV1().title("Credit 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:

  ```javascript
    userTaskTabV1()
      .processId(context.processId())
      .id("wniosek_o_kredyt")
      .tabHeader(
        processTabHeaderV1().title("Credit application")
      )
      .data("showClaimButton", "true");
  ```

Example of user task tab configuration:

```javascript
    processConfigV1()
        .tab(
            processTabV1()
                .id("task")
                .name("Mortgage application")
                .type("usertask")
                .data(
                    userTaskTabV1()
                        .processId(context.processId())
                        .id("wniosek_o_kredyt")
                        .tabHeader(
                            processTabHeaderV1().title("Credit application")
                        )
                        .data("showClaimButton", "true")
                )
        )
```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-7424e2ff7fe1b383d1a8d5d912c5071ee0a150d3%2Fapp-screens-user-task-tab.png?alt=media)

### `layoutTabV1`

`layoutTabV1(tabs)` Creates the configuration of a "layout" type tab, which allows defining the layout of other tabs. E.g. place a web component and an Eximee form side by side. You can specify any number of definitions - the tabs will be placed next to each other. The available space will be allocated equally to each tab. It takes one parameter:

* `tabs` - list of tabs to be displayed within this "layout" type tab. You should provide a list of definitions of [`processTabV1`](#processtabv1).

  Example:

  ```javascript
  layoutTabV1(
      [
      processTabV1().id("dane").name("Data").type("details"),
      processTabV1().id("notatki").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:

  ```javascript
  layoutTabV1()
      .tab(
      processTabV1()
          .id("dane")
          .name("Data")
          .type("details")
      )
      .tab(
      processTabV1()
          .id("historia")
          .name("History")
          .type("history")
      );
  ```

Example of a "layout" type tab configuration:

```javascript
processConfigV1()
    .tab(
        processTabV1()
            .id("layout-tab")
            .name("Mortgage application")
            .type("layout")
            .data(
                layoutTabV1()
                    .tab(
                        processTabV1()
                            .id("notatki")
                            .name("Data")
                            .type("notes"),
                    )
                    .tab(
                        processTabV1()
                            .id("form")
                            .name("Credit application")
                            .type("form")
                            .data(
                                formTabV1()
                                    .formId("wniosek_hipo_br")
                            ),
                    )
            )
    )
```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-9e6d28016f4fcbfd5f82bd74c2693481805af62f%2Fkonfiguracja-ekranow-aplikacji-layoutTabV1.png?alt=media)

### `formTabV1`

`formTabV1(processId, formId, tabHeader)`

Creates the configuration of a "form" type tab, which allows embedding a form. It takes three parameters:

* `processId` - process identifier to which the tab belongs.
* `formId` - name of the form to be embedded in the tab.
* `tabHeader` - optional tab header configuration (definition [`processTabHeaderV1`](#processtabheaderv1)).

  Example:

  ```javascript
  formTabV1(
      context.processId(),
      "wniosek_o_kredyt_form",
      processTabHeaderV1().title("Credit application")
  )
  ```

Fluent API:

* `.processId(processId)` - set the process identifier
* `.formId(formId)` - set the form name
* `.tabHeader(tabHeader)` - set the tab header

  Example:

  ```javascript
  formTabV1()
      .processId(context.processId())
      .formId("wniosek_o_kredyt_form")
      .tabHeader(
        processTabHeaderV1().title("Credit application")
      );
  ```

Example of form tab configuration:

```javascript
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")
                            ),
                    )
            )
    )
```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-239f8c7771fed2f7c6007cc8a95f408bbde88720%2Fapp-screens-form-example.png?alt=media)

### `documentsTabV1`

`documentsTabV1(groups)`

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

* `groups` - list of document groups to be displayed in the tab. You should provide a list of definitions of `documentGroupV1`.

  Example:

  ```javascript
  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:

  ```javascript
  documentsTabV1()
      .group(documentGroupV1())
      .group(documentGroupV1());
  ```

#### `documentGroupV1`

`documentGroupV1(documents)`

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

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

  Example:

  ```javascript
  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:

  ```javascript
  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 the configuration of a single document in a document group. It takes four parameters:

* `name` - document name, displayed in Eximee Dashboard.
* `source` - document source, specifying where it should be retrieved from (e.g. URL to a PDF file).
* `typeName` - optional document type name, which can be used for additional categorization.
* `style` - optional configuration of the document display style. Available document styles:

  * `primary`

  Example:

  ```javascript
  documentV1(
      "Loan agreement",
      "https://example.com/umowa.pdf",
      "kredyt",
      "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:

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

Example of documents tab configuration:

```javascript
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("kredyt")
                                    .style('primary')
                            )
                            .document(
                                documentV1()
                                    .name("Insurance agreement")
                                    .source({url: "https://example.com/umowa_ubezpieczenia.pdf"})
                                    .typeName("ubezpieczenie")
                                    .style('secondary')
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Loan application")
                                    .source({url: "https://example.com/wniosek.pdf"})
                                    .typeName("wniosek")
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Appendix to the agreement")
                                    .source({url: "https://example.com/aneks.pdf"})
                                    .typeName("aneks")
                            )
                    )
            )
    )

```

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-56b07435f2459a863f6684880b99299b164e6308%2Fapp-screens-documents-example.png?alt=media)

### `externalComponentTabV1`

`externalComponentTabV1(data, tabHeader, config)`

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

* `tabHeader` - optional tab header configuration (definition [`processTabHeaderV1`](#processtabheaderv1)).
* `config` - configuration of the web component to be embedded in the tab. You should provide a definition of [`webComponentV1`](#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:

  ```javascript
  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 an external component tab

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

![](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-6e0427f75cfdee4f0c1682c30576d412a5452e06%2Fapp-screens-external-component-example.png?alt=media)