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

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.

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

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.

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:

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:

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

    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.

  Przykład:

    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:

    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.

  Przykład:

    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)

    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:

  sectionDetailV1(
      "PESEL",
      "1111111116"
  )

Fluent API:

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

  Przykład:

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

Przykład pełnej konfiguracji nagłówka

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

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.
  • documents - zakładka dokumentów. Dla tego typu w polu data należy zdefiniować documentsTabV1.
  • external - zakładka komponentu zewnętrznego. Dla tego typu w polu data należy zdefiniować externalComponentTabV1.
  • form- zakładka formularza. Dla tego typu w polu data należy zdefiniować formTabV1.
  • layout - zakładka pozwalająca na grupowanie wielu zakładek. Dla tego typu w polu data należy zdefiniować 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.

  Przykład:

    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
• .hidden() - oznacza zakładkę jako ukrytą, niedostępną dla użytkownika
• .data(data) - ustawienie dodatkowych danych konfiguracyjnych Przykład:

    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)

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

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

  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:

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

  Przykład:

  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:

  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:

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

Fluent API:

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

  Przykład:

  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).
• config - dodatkowa konfiguracja specyficzna dla zakładek zadań użytkownika.
• data - dodatkowe dane konfiguracyjne.

  Przykład:

    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:

    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:

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

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.

  Przykład:

  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:

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

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

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

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

  Przykład:

  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:

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

Przykład konfiguracji zakładki formularza:

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

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:

  documentsTabV1([
      documentGroupV1(),
      documentGroupV1()
  ])

Fluent API:

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

  Przykład:

  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:

  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:

  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:

  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:

  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:

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

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).
• config - konfiguracja komponentu webowego, który ma być osadzony w zakładce. Należy dostarczyć definicję 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:

  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

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

Ukrywanie systemowych zakładek

System domyślnie prezentuje zakładki szczegółów instnacji procesu:

• formularz bieżącego zadania użytkownika,
• dane procesu,
• diagram bieżącego stanu,
• historię wykonania.

Wskazane zakładki są generowane automatycznie i prezentowane na podstawie uprawnień zalogowanego użytkownika.

Istnieje możliwość ukrycia części systemowych zakładek zwracając dla nich przesłoniętą konfigurację. Możliwe jest stworzenie zakładki o id zgodnym z id zakładki systemowej i przesłonięcie jej konfiguracji wywołując na niej metodę .hidden().

Przykładowo, żeby ukryć trzy systemowe zakładki można zwrócić konfigurację:

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

Konkretne zakładki z ich id są opisane w kolejnym punkcie.

Systemowe zakładki instancji procesu

id	typ zakładki	możliwość ukrycia
-	formularz bieżącego zadania użytkownika	nie, zawsze widoczna jeśli jest zadanie
process-details	podsumowania danych procesu	tak
process-overview	diagramu bieżącego stanu procesu	tak
history	historia zmian w procesie	tak