# Konfiguracja ekranów aplikacji

Aplikacje Eximee mogą wpływać na wygląd i układ widoków prezentowanych w Eximee Dashboard. Konfiguracja odbywa się poprzez zdefiniowanie ustawień w komponencie aplikacji, w sekcji „Ekrany aplikacji”.

![](/files/HQqURNurm5inZSIEA72C)

W tej sekcji należy przygotować skrypt zgodny z udostępnionym API, który pozwala dostosować widoki Eximee Dashboard dla danej aplikacji. W ramach konfiguracji można m.in.:

* wskazać, które zakładki mają być widoczne,
* określić kolejność wyświetlania zakładek,
* dostosować zawartość prezentowaną w poszczególnych zakładkach,
* zdefiniować wygląd nagłówka dla danego procesu.

Ekrany aplikacji konfigurowane są poprzez implementację funkcji konfiguracyjnej zwracającej obiekt konfiguracji `ProcessConfig`.

np.

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

{% hint style="info" %}
Konfiguracja ekranów aplikacji jest cache'owana po stronie Eximee Dashboard. W zależności od konfiguracji środowiska, zmiany wprowadzone w skrypcie konfiguracyjnym mogą być widoczne dopiero po upływie kilku minut od momentu ich zapisania.
{% endhint %}

## API konfiguracyjne

Poniżej znajdują się szczegółowe informacje dotyczące dostępnych funkcji i sposobu konfiguracji ekranów aplikacji. W skryptach konfiguracyjnych dostępne są następujące low-code API platformy Eximee:

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

W kontekście wywołania funkcji (`context`) dostępne są następujące metody:

* `context.processId()` - zwraca identyfikator procesu, dla którego konfigurowany jest ekran. Jest to szczególnie przydatne przy definiowaniu zakładek zadań użytkownika, które muszą być powiązane z konkretnym procesem.

**Styl fluent (builder)**

API konfiguracyjne jest dostępne w stylu *fluent* (builder), co oznacza, że obiekt konfiguracji można budować poprzez łańcuchowe wywołania metod. Dzięki temu konfiguracja jest czytelna i łatwa do rozbudowy w kolejnych krokach.

Przykładowo, konfigurację można zbudować zarówno przez przekazanie parametrów do funkcji, jak i przez kolejne wywołania metod:

```javascript
function call(context) {
  return processConfigV1()
    .header(
      headerV1()
        .title("Wniosek o kredyt")
        .section(
          headerSectionV1()
            .key("Klient")
            .label("123123")
        )
    )
    // Zakładki procesu można ustawić zbiorczo lub dodawać pojedynczo:
    .tabs([
      processTabV1().id("dane").name("Dane").type("details"),
    ])
    .tab(
      processTabV1().id("historia").name("Historia").type("history")
    )
    // Analogicznie dla zakładek zadań użytkownika:
    .userTaskTabs({
      wniosek_o_kredyt: processTabV1()
        .id("wniosek_o_kredyt")
        .name("Wniosek o kredyt")
        .type("usertask")
        .data(
          userTaskTabV1()
            .processId(context.processId())
            .id("wniosek_o_kredyt")
        )
    })
    .userTaskTab(
      "kolejna_zakladka",
      processTabV1().id("kolejna_zakladka").name("Kolejna zakładka").type("usertask")
    );
}
```

W praktyce:

* wariant z parametrami (np. `processConfigV1(header, tabs, userTaskTabs)`) jest wygodny, gdy masz już przygotowane kompletne obiekty/listy,
* wariant fluent (`processConfigV1().header(...).tab(...).userTaskTab(...)`) lepiej sprawdza się, gdy konfigurację budujesz krok po kroku.

### `processConfigV1`

`processConfigV1(header, tabs, userTaskTabs)`

Tworzy instancję konfiguracji procesu. Przyjmuje trzy parametry:

* `header` - konfiguracja nagłówka procesu, należy dostarczyć definicję `headerV1`.
* `tabs` - lista zakładek procesu. Należy dostarczyć listę definicji `processTabV1`.
* `userTaskTabs` - mapa zakładek zadań użytkownika. Należy dostarczyć parę klucz-wartość, gdzie klucz to identyfikator zadania użytkownika procesu (user-task), a wartość to definicja `processTabV1`. Zakładka z tej mapy będzie wyświetlana zawsze jako pierwsza, jeśli w danej chwili proces znajduje się na wskazanym zadaniu użytkownika.

  Fluent API:

  * `.header(header)` - ustawienie nagłówka procesu
  * `.tabs(tabs)` - ustawienie listy zakładek naraz
  * `.tab(tab)` - dodanie pojedynczej zakładki (można wywołać wielokrotnie)
  * `.userTaskTabs(userTaskTabs)` - ustawienie mapy naraz
  * `.userTaskTab(key, tab)` - dodanie pojedynczego wpisu (można wywołać wielokrotnie)

  Przykład:

  ```javascript
    processConfigV1(
      headerV1()
        .title("Wniosek o kredyt"),
      [processTabV1().id("dane")],
      { wniosek_o_kredyt: processTabV1().id("wniosek_o_kredyt") }
    )  
  ```

  ```javascript
    processConfigV1()
      .header(
        headerV1()
          .title("Wniosek o kredyt")
      )
      .tabs([
        processTabV1()
          .id("dane")
          .name("Dane")
      ])
      .userTaskTab(
        "wniosek_o_kredyt",
        processTabV1()
          .id("wniosek_o_kredyt")
          .name("Wniosek o kredyt")
          .type("usertask")
        )
        .tab(
          processTabV1()
            .id("historia")
            .name("Historia")
            .type("history")
        )
        .userTaskTab(
           "kolejna_zakladka",
           processTabV1()
             .id("kolejna_zakladka")
             .name("Kolejna zakładka")
             .type("usertask")
      );

  ```

### `headerV1`

`headerV1(title, sections)`

Tworzy konfigurację nagłówka procesu. Przyjmuje dwa parametry:

* `title` - tytuł nagłówka, wyświetlany w Eximee Dashboard.
* `sections` - lista sekcji nagłówka. Należy dostarczyć listę definicji [`headerSectionV1`](#headersectionv1).

  Przykład:

  ```javascript
    headerV1(
      "Wniosek o kredyt",
      [headerSectionV1().key("Klient").label("123123")]
    )
  ```

Fluent API:

* `.title(title)` - ustawienie tytułu nagłówka
* `.sections(sections)` - ustawienie całej listy sekcji naraz
* `.section(section)` - dodanie pojedynczej sekcji (można wywołać wielokrotnie)

  Przykład:

  ```javascript
    headerV1()
      .title("Wniosek o kredyt")
      .section(
        headerSectionV1()
          .key("Klient")
          .label("123123")
      );
  ```

#### `headerSectionV1`

`headerSectionV1(label, key, details)`

Tworzy konfigurację sekcji nagłówka. Przyjmuje trzy parametry:

* `label` - etykieta sekcji, wyświetlana w Eximee Dashboard.
* `key` - wartość sekcji
* `details` - lista informacji szczegółowych, które mają być wyświetlane w pomocy kontekstowej sekcji. Należy dostarczyć listę definicji [`sectionDetailV1`](#sectiondetailv1).

  Przykład:

  ```javascript
    headerSectionV1(
      "123123",
      "Klient",
      [sectionDetailV1().key("PESEL").value("12312312312")]
    )
  ```

Fluent API:

* `.label(label)` - ustawienie etykiety sekcji
* `.key(key)` - ustawienie treści sekcji
* `.details(details)` - ustawienie listy dodatkowych informacji
* `.detail(detail)` - dodanie pojedynczej informacji (można wywołać wielokrotnie)

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

#### `sectionDetailV1`

`sectionDetailV1(label, key)`

Tworzy konfigurację informacji szczegółowej w sekcji nagłówka. Przyjmuje dwa parametry:

* `label` - etykieta informacji dodatkowej, wyświetlana w Eximee Dashboard.
* `key` - treść informacji dodatkowej

  Przykład:

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

Fluent API:

* `.label(label)` - ustawienie etykiety informacji dodatkowej
* `.key(key)` - ustawienie treści informacji dodatkowej

  Przykład:

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

Przykład pełnej konfiguracji nagłówka

```javascript
processConfigV1()
    .header(
        headerV1("zadanie")
            .section(
                headerSectionV1("Klient", "777777")
                    .detail(
                        sectionDetailV1("PESEL", "1111111116")
                    )
                    .detail(
                        sectionDetailV1("Imię", "Jan")
                    )
                    .detail(
                        sectionDetailV1("Nazwisko", "Kowalski")
                    )
            )
            .section(
                headerSectionV1("Pracownik", "12333")
                    .detail(
                        sectionDetailV1("Oddział", "Oddział nr. 2 w Ustrzykach Dolnych")
                    )
            )
    )

```

![](/files/hucIqx6rEc2AMDU76Upy)

### `processTabV1`

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

Tworzy konfigurację zakładki procesu. Przyjmuje pięć parametrów:

* `id` - unikalny identyfikator zakładki.
* `name` - nazwa zakładki, wyświetlana w Eximee Dashboard.
* `type` - typ zakładki, określający jej funkcjonalność. Dostępne typy:
  * `usertask` - zakładka zadania użytkownika. Dla tego typu w polu data należy zdefiniować [`userTaskTabV1`](#usertasktabv1).
  * `documents` - zakładka dokumentów. Dla tego typu w polu data należy zdefiniować [`documentsTabV1`](#documentstabv1).
  * `external` - zakładka komponentu zewnętrznego. Dla tego typu w polu data należy zdefiniować [`externalComponentTabV1`](#externalcomponenttabv1).
  * `form`- zakładka formularza. Dla tego typu w polu data należy zdefiniować [`formTabV1`](#formtabv1).
  * `layout` - zakładka pozwalająca na grupowanie wielu zakładek. Dla tego typu w polu data należy zdefiniować [`layoutTabV1`](#layouttabv1).
  * `process-details` - systemowa zakładka zawierająca dane sprawy
  * `process-overview` - systemowa zakładka zawierająca szczegóły procesu. Diagram bpmn oraz ewentualne incydenty.
  * `notes` - systemowa zakładka z notatkami do procesu
* `permission` - opcjonalne uprawnienie wymagane do wyświetlenia zakładki.
* `data` - dodatkowe dane konfiguracyjne, specyficzne dla typu zakładki (np. `userTaskTabV1` dla zakładek zadań użytkownika) - [Definicje typów zakładek](#definicje-typow-zakladek).

  Przykład:

  ```javascript
    processTabV1(
      "wniosek_o_kredyt",
      "Wniosek o kredyt",
      "usertask",
      null,
      userTaskTabV1().processId(context.processId()).id("wniosek_o_kredyt")
    )
  ```

Fluent API:

* `.id(id)` - ustawienie identyfikatora zakładki
* `.name(name)` - ustawienie nazwy zakładki
* `.type(type)` - ustawienie typu zakładki
* `.permission(permission)` - ustawienie wymaganego uprawnienia
* `.data(data)` - ustawienie dodatkowych danych konfiguracyjnych Przykład:

  ```javascript
    processTabV1()
      .id("wniosek_o_kredyt")
      .name("Wniosek o kredyt")
      .type("usertask")
      .data(
        userTaskTabV1()
          .processId(context.processId())
          .id("wniosek_o_kredyt")
      );
  ```

Przykład konfiguracji zakładki procesu (więcej typów zakładek w sekcji [Definicje typów zakładek](#definicje-typow-zakladek))

```javascript
processConfigV1()
  .tab(
    processTabV1()
      .id("task")
      .type("form")
      .name("Wniosek o kredyt hipoteczny")
      .data(
        formTabV1()
          .formId("wniosek_hipo_br")
      )
  )
```

![](/files/Gmx8HUiv2USlWe0S9rT3)

### `processTabHeaderV1`

`processTabHeaderV1(title, standardButtonDisabled, businessSlot)`

Tworzy konfigurację nagłówka zakładki procesu. Przyjmuje trzy parametry:

* `title` - tytuł zakładki, wyświetlany w Eximee Dashboard.
* `standardButtonDisabled` - opcjonalna flaga, która pozwala wyłączyć standardowe przyciski (np. "Dalej", "Zapisz") w nagłówku zakładki - zależnie od typu zakładki.
* `businessSlot` - opcjonalna konfiguracja, która pozwala na osadzenie niestandardowego komponentu webowego w nagłówku zakładki. Należy dostarczyć definicję [`webComponentV1`](#webcomponentv1). Komponent zostanie wyświetlony gdy `standardButtonDisabled` będzie ustawione na `true`. W miejscu standardowych przycisków pojawi się wtedy slot, w którym zostanie osadzony komponent.

  Przykład:

  ```javascript
  processTabHeaderV1(
      "Wniosek o kredyt",
      true,
      businessSlot(
          webComponentV1(
              "hipo-buttons",
              [sourceV1("https://example.com/custom-component.js")]
          )
      )
  )
  ```

Fluent API:

* `.title(title)` - ustawienie tytułu zakładki
* `.standardButtonDisabled(standardButtonDisabled)` - ustawienie flagi wyłączającej standardowe przyciski
* `.businessSlot(businessSlot)` - ustawienie konfiguracji dodatkowego slotu

  Przykład:

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

### `webComponentV1`

`webComponentV1(name, sources)`

Tworzy konfigurację niestandardowego komponentu webowego, który może być osadzony w dedykowanych miejscach Eximee Dashboard np. w nagłówku zakładki ([`processTabHeaderV1`](#processtabheaderv1)). Przyjmuje dwa parametry:

* `tag` - tag HTML webcomponentu.
* `sources` - źródła komponentu, określające, skąd ma być ładowany (np. URL do pliku JavaScript). Należy dostarczyć definicję [`sourceV1`](#sourcev1).

  Przykład:

  ```javascript
  webComponentV1(
      "hipo-buttons",
       [sourceV1("https://example.com/custom-component.js")]
  )
  ```

Fluent API:

* `.tag(tag)` - ustawienie nazwy komponentu
* `.sources(sources)` - ustawienie listy źródeł komponentu
* `.source(source)` - ustawienie pojedynczego źródła komponentu

  Przykład:

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

#### `sourceV1`

`sourceV1(path)`

Tworzy konfigurację źródła dla niestandardowego komponentu webowego. Przyjmuje jeden parametr:

* `path` - ścieżka do pliku JavaScript, z którego ma być ładowany komponent.

  Przykład:

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

Fluent API:

* `.path(path)` - ustawienie ścieżki do źródła

  Przykład:

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

## Definicje typów zakładek

### `userTaskTabV1`

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

Tworzy konfigurację zakładki dla zadania użytkownika. Przyjmuje pięć parametrów:

* `processId` - identyfikator procesu
* `id` - unikalny identyfikator zakładki
* `tabHeader` - opcjonalna konfiguracja nagłówka zakładki (definicja [`processTabHeaderV1`](#processtabheaderv1)).
* `config` - dodatkowa konfiguracja specyficzna dla zakładek zadań użytkownika.
* `data` - dodatkowe dane konfiguracyjne.

  Przykład:

  ```javascript
    userTaskTabV1(
      context.processId(),
      "wniosek_o_kredyt",
      processTabHeaderV1().title("Wniosek o kredyt"),
      null,
      { "showClaimButton": "true" }
    )
  ```

Fluent API:

* `.processId(processId)` - ustawienie identyfikatora procesu
* `.id(id)` - ustawienie identyfikatora zakładki
* `.tabHeader(tabHeader)` - ustawienie nagłówka zakładki
* `.config(config)` - ustawienie dodatkowej konfiguracji
* `.data(key, value)` - ustawienie dodatkowych parametrów konfiguracyjnych

  Przykład:

  ```javascript
    userTaskTabV1()
      .processId(context.processId())
      .id("wniosek_o_kredyt")
      .tabHeader(
        processTabHeaderV1().title("Wniosek o kredyt")
      )
      .data("showClaimButton", "true");
  ```

Przykład konfiguracji zakładki zadania użytkownika:

```javascript
    processConfigV1()
        .tab(
            processTabV1()
                .id("task")
                .name("Wniosek o kredyt hipoteczny")
                .type("usertask")
                .data(
                    userTaskTabV1()
                        .processId(context.processId())
                        .id("wniosek_o_kredyt")
                        .tabHeader(
                            processTabHeaderV1().title("Wniosek o kredyt")
                        )
                        .data("showClaimButton", "true")
                )
        )
```

![](/files/zWsEcvOrp6d1VGeviJVq)

### `layoutTabV1`

`layoutTabV1(tabs)` Tworzy konfigurację zakładki typu "layout", która pozwala na zdefiniowanie układu innych zakładek. Np. umieścić obok siebie webcomponent oraz formularz Eximee. Można określić dowolną ilość definicji - zakładki zostaną umieszczone obok siebie. Dostępna przestrzeń zostanie przydzielona równo dla każdej zakładki. Przyjmuje jeden parametr:

* `tabs` - lista zakładek, które mają być wyświetlane w ramach tej zakładki typu "layout". Należy dostarczyć listę definicji [`processTabV1`](#processtabv1).

  Przykład:

  ```javascript
  layoutTabV1(
      [
      processTabV1().id("dane").name("Dane").type("details"),
      processTabV1().id("notatki").name("Notatki").type("notes")
      ]
  )
  ```

Fluent API:

* `.tabs(tabs)` - ustawienie listy zakładek naraz
* `.tab(tab)` - dodanie pojedynczej zakładki (można wywołać wielokrotnie)

  Przykład:

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

Przykład konfiguracji zakładki typu "layout":

```javascript
processConfigV1()
    .tab(
        processTabV1()
            .id("layout-tab")
            .name("Wniosek o kredyt hipoteczny")
            .type("layout")
            .data(
                layoutTabV1()
                    .tab(
                        processTabV1()
                            .id("notatki")
                            .name("Dane")
                            .type("notes"),
                    )
                    .tab(
                        processTabV1()
                            .id("form")
                            .name("Wniosek o kredyt")
                            .type("form")
                            .data(
                                formTabV1()
                                    .formId("wniosek_hipo_br")
                            ),
                    )
            )
    )
```

![](/files/rCvspGOzML8n3DKYB076)

### `formTabV1`

`formTabV1(processId, formId, tabHeader)`

Tworzy konfigurację zakładki typu "form", która pozwala na osadzenie formularza. Przyjmuje trzy parametry:

* `processId` - identyfikator procesu, do którego należy zakładka.
* `formId` - nazwa formularza, który ma być osadzony w zakładce.
* `tabHeader` - opcjonalna konfiguracja nagłówka zakładki (definicja [`processTabHeaderV1`](#processtabheaderv1)).

  Przykład:

  ```javascript
  formTabV1(
      context.processId(),
      "wniosek_o_kredyt_form",
      processTabHeaderV1().title("Wniosek o kredyt")
  )
  ```

Fluent API:

* `.processId(processId)` - ustawienie identyfikatora procesu
* `.formId(formId)` - ustawienie nazwy formularza
* `.tabHeader(tabHeader)` - ustawienie nagłówka zakładki

  Przykład:

  ```javascript
  formTabV1()
      .processId(context.processId())
      .formId("wniosek_o_kredyt_form")
      .tabHeader(
        processTabHeaderV1().title("Wniosek o kredyt")
      );
  ```

Przykład konfiguracji zakładki formularza:

```javascript
processConfigV1()
    .tab(
        processTabV1()
            .id("layout-tab")
            .name("Dane klienta")
            .type("layout")
            .data(
                layoutTabV1()
                    .tab(
                        processTabV1()
                            .id("form")
                            .name("Dane klienta")
                            .type("form")
                            .data(
                                formTabV1()
                                    .formId("hip_dane_klienta")
                            ),
                    )
            )
    )
```

![](/files/hwzqJN66tQJeKa5BEKEl)

### `documentsTabV1`

`documentsTabV1(groups)`

Tworzy konfigurację zakładki typu "documents", która pozwala na wyświetlenie dokumentów przypisanych do procesu. Przyjmuje jeden parametr:

* `groups` - lista grup dokumentów, które mają być wyświetlane w zakładce. Należy dostarczyć listę definicji `documentGroupV1`.

  Przykład:

  ```javascript
  documentsTabV1([
      documentGroupV1(),
      documentGroupV1()
  ])
  ```

Fluent API:

* `.groups(groups)` - ustawienie listy grup naraz
* `.group(group)` - dodanie pojedynczej grupy (można wywołać wielokrotnie)

  Przykład:

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

#### `documentGroupV1`

`documentGroupV1(documents)`

Tworzy konfigurację grupy dokumentów w zakładce "documents". Przyjmuje jeden parametr:

* `documents` - lista dokumentów, które mają być wyświetlane w ramach tej grupy. Należy dostarczyć listę definicji `documentV1`.

  Przykład:

  ```javascript
  documentGroupV1([
    documentV1()
        .name("Umowa kredytowa")
        .source({ url: "https://example.com/umowa.pdf" }),
    documentV1()
        .name("Wniosek kredytowy")
        .source({ url: "https://example.com/wniosek.pdf" })
  ])
  ```

Fluent API:

* `.documents(documents)` - ustawienie listy dokumentów naraz
* `.document(document)` - dodanie pojedynczego dokumentu (można wywołać wielokrotnie)

  Przykład:

  ```javascript
  documentGroupV1()
      .document(
          documentV1()
              .name("Umowa kredytowa")
              .source({ url: "https://example.com/umowa.pdf" })
      )
      .document(
          documentV1()
              .name("Wniosek kredytowy")
              .source({ url: "https://example.com/wniosek.pdf" })
      );
  ```

#### `documentV1`

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

Tworzy konfigurację pojedynczego dokumentu w grupie dokumentów. Przyjmuje cztery parametry:

* `name` - nazwa dokumentu, wyświetlana w Eximee Dashboard.
* `source` - źródło dokumentu, określające, skąd ma być pobierany (np. URL do pliku PDF).
* `typeName` - opcjonalna nazwa typu dokumentu, która może być wykorzystana do dodatkowej kategoryzacji.
* `style` - opcjonalna konfiguracja stylu wyświetlania dokumentu. Dostępne style dokumentu:

  * `primary`

  Przykład:

  ```javascript
  documentV1(
      "Umowa kredytowa",
      "https://example.com/umowa.pdf",
      "kredyt",
      "primary"
  )
  ```

Fluent API:

* `.name(name)` - ustawienie nazwy dokumentu
* `.source(source)` - ustawienie źródła dokumentu
* `.typeName(typeName)` - ustawienie nazwy typu dokumentu
* `.style(style)` - ustawienie konfiguracji stylu

  Przykład:

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

Przykład konfiguracji zakładki dokumentów:

```javascript
processConfigV1()
    .tab(
        processTabV1()
            .id("documents-tab")
            .name("Dokumenty")
            .type("documents")
            .data(
                documentsTabV1()
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Umowa kredytowa")
                                    .source({url: "https://example.com/umowa.pdf"})
                                    .typeName("kredyt")
                                    .style('primary')
                            )
                            .document(
                                documentV1()
                                    .name("Umowa ubezpieczenia")
                                    .source({url: "https://example.com/umowa_ubezpieczenia.pdf"})
                                    .typeName("ubezpieczenie")
                                    .style('secondary')
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Wniosek kredytowy")
                                    .source({url: "https://example.com/wniosek.pdf"})
                                    .typeName("wniosek")
                            )
                    )
                    .group(
                        documentGroupV1()
                            .document(
                                documentV1()
                                    .name("Aneks do umowy")
                                    .source({url: "https://example.com/aneks.pdf"})
                                    .typeName("aneks")
                            )
                    )
            )
    )

```

![](/files/WDkdvZm5IFz9SNBQlffY)

### `externalComponentTabV1`

`externalComponentTabV1(data, tabHeader, config)`

Tworzy konfigurację zakładki typu "external", która pozwala na osadzenie zewnętrznego komponentu. Przyjmuje trzy parametry:

* `tabHeader` - opcjonalna konfiguracja nagłówka zakładki (definicja [`processTabHeaderV1`](#processtabheaderv1)).
* `config` - konfiguracja komponentu webowego, który ma być osadzony w zakładce. Należy dostarczyć definicję [`webComponentV1`](#webcomponentv1).
* `data` - dane konfiguracyjne specyficzne dla osadzanego komponentu.

Przykład: `javascript externalComponentTabV1( { url: "https://example.com" }, processTabHeaderV1("Zewnętrzny komponent"), webComponentV1("custom-component", [sourceV1("https://example.com/custom-component.js")]) )`

Fluent API:

* `.setData(data)` - ustawienie całej mapy konfiguracyjnej dla komponentu naraz
* `.data(key, value)` - ustawienie pojedynczego wpisu konfiguracyjnego dla komponentu (można wywołać wielokrotnie)
* `.tabHeader(tabHeader)` - ustawienie nagłówka zakładki
* `.config(config)` - ustawienie dodatkowej konfiguracji

  Przykład:

  ```javascript
  externalComponentTabV1()
    .data("url", "https://example.com")
    .tabHeader(
        processTabHeaderV1("Zewnętrzny komponent")
    )
    .config(
        webComponentV1("custom-component")
            .source(sourceV1("https://example.com/custom-component.js"))
    )
  ```

Przykład konfiguracji zakładki zewnętrznego komponentu

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

![](/files/rJ1Y2KqZUgWGKgomBxPu)


---

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