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

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

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

```

![](https://1082717226-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)`

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

![](https://1082717226-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)`

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

![](https://1082717226-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)` 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")
                            ),
                    )
            )
    )
```

![](https://1082717226-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)`

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

![](https://1082717226-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)`

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

```

![](https://1082717226-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)`

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

![](https://1082717226-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)