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

![](/files/92e56118834f2c218ea069723e24cecdc4df769c)

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:

* indicate which tabs should be visible,
* determine the order in which tabs are displayed,
* adjust the content displayed in individual tabs,
* define the appearance of the header for a given process.

Application screens are configured by implementing a configuration function returning a configuration object `ProcessConfig`.

e.g.

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

{% 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* style (builder), 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 by successive method calls:

```javascript
function call(context) {
  return processConfigV1()
    .header(
      headerV1()
        .title("Loan application")
        .section(
          headerSectionV1()
            .key("Client")
            .label("123123")
        )
    )
    // Process tabs can be set in bulk or added one by one:
    .tabs([
      processTabV1().id("data").name("Data").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:

* 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 a process configuration instance. 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 a process user task (user-task), and the value is a definition of `processTabV1`. The tab from this map will always be displayed first if the process is currently on the indicated 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("Loan application"),
      [processTabV1().id("data")],
      { loan_application: processTabV1().id("loan_application") }
    )  
  ```

  ```javascript
    processConfigV1()
      .header(
        headerV1()
          .title("Loan application")
      )
      .tabs([
        processTabV1()
          .id("data")
          .name("Data")
      ])
      .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 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(
      "Loan application",
      [headerSectionV1().key("Client").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("Loan application")
      .section(
        headerSectionV1()
          .key("Client")
          .label("123123")
      );
  ```

#### `headerSectionV1`

`headerSectionV1(label, key, details)`

Creates 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",
      "Client",
      [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("Client")
      .detail(
        sectionDetailV1()
          .key("PESEL")
          .value("12312312312")
      );
  ```

#### `sectionDetailV1`

`sectionDetailV1(label, key)`

Creates configuration for detailed information in a 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("Client", "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")
                    )
            )
    )

```

![](/files/9547d2254d1b9b490ffa902f7610c1f2980098be)

### `processTabV1`

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

Creates 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` - tab allowing multiple tabs to be grouped. 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 possible incidents.
  * `notes` - system tab with notes for the process
* `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(
      "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
* `.data(data)` - set additional configuration data Example:

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

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 loan application")
      .data(
        formTabV1()
          .formId("mortgage_application_br")
      )
  )
```

![](/files/3dfb28557d6718066934d0880abb8e88319a9d58)

### `processTabHeaderV1`

`processTabHeaderV1(title, standardButtonDisabled, businessSlot)`

Creates process tab header configuration. 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` is set to `true`. In place of the standard buttons, a slot will then appear where the component will be embedded.

  Example:

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

  Example:

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

### `webComponentV1`

`webComponentV1(name, sources)`

Creates configuration for 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 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 user task tab configuration. 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(),
      "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 additional configuration
* `.data(key, value)` - set additional configuration parameters

  Example:

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

Example of user task tab configuration:

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

![](/files/64ff44bbcb9858c3a5d3e8179fd52332323c748d)

### `layoutTabV1`

`layoutTabV1(tabs)` Creates configuration for a "layout" tab, which allows defining the layout of other tabs. For example, place a web component and an Eximee form side by side. Any number of definitions can be specified - the tabs will be placed side by side. The available space will be allocated evenly to each tab. It takes one parameter:

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

  Example:

  ```javascript
  layoutTabV1(
      [
      processTabV1().id("data").name("Data").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:

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

Example of a "layout" tab configuration:

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

![](/files/2cf2dcb833f99effb0b7a7ba0a5241ebf1463c07)

### `formTabV1`

`formTabV1(processId, formId, tabHeader)`

Creates configuration for a "form" 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(),
      "loan_application_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:

  ```javascript
  formTabV1()
      .processId(context.processId())
      .formId("loan_application_form")
      .tabHeader(
        processTabHeaderV1().title("Loan 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("client_data_br")
                            ),
                    )
            )
    )
```

![](/files/2020afa8ba2ac6fed03e0b58c4b9255ae83d9e12)

### `documentsTabV1`

`documentsTabV1(groups)`

Creates configuration for a "documents" 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 configuration for 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/agreement.pdf" }),
    documentV1()
        .name("Loan application")
        .source({ url: "https://example.com/application.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/agreement.pdf" })
      )
      .document(
          documentV1()
              .name("Loan application")
              .source({ url: "https://example.com/application.pdf" })
      );
  ```

#### `documentV1`

`documentV1(name, source, typeName, style)`

Creates configuration for 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 fetched 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/agreement.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:

  ```javascript
  documentV1()
      .name("Loan agreement")
      .source({ url: "https://example.com/agreement.pdf" })
      .typeName("loan")
      .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/agreement.pdf"})
                                    .typeName("loan")
                                    .style('primary')
                            )
                            .document(
                                documentV1()
                                    .name("Insurance agreement")
                                    .source({url: "https://example.com/insurance_agreement.pdf"})
                                    .typeName("insurance")
                                    .style('secondary')
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Loan application")
                                    .source({url: "https://example.com/application.pdf"})
                                    .typeName("application")
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Addendum to the agreement")
                                    .source({url: "https://example.com/addendum.pdf"})
                                    .typeName("addendum")
                            )
                    )
            )
    )

```

![](/files/ade61c30e611017dba51c7467049c6bb7d7db0b7)

### `externalComponentTabV1`

`externalComponentTabV1(data, tabHeader, config)`

Creates configuration for an "external" 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 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 of external component tab configuration

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

![](/files/da260aaf2990630bd192c6d7444c82c994c24a8d)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/eximee-dashboard/konfiguracja/konfiguracja-ekranow-aplikacji.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.