Erstellen Sie anwenderdefinierte Komponenten, die mit dem Komponentengenerator auf Seiten wiederverwendet werden sollen

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 10 Minuten Lesedauer

    • Verwenden Sie anwenderdefinierte Komponenten über Experiences und Seiten in hinweg UI Builder.

    Erstellen Sie anwenderdefinierte Komponenten in UI BuilderVon Komponentenerstellungs-UI. Die UI für Komponentenerstellung weist viele Ähnlichkeiten mit der Seitenerstellung auf und ermöglicht Ihnen, Komponenten auf die gleiche Weise zu konfigurieren, wie Sie es bei der Konfiguration einer Seite in tun würden UI Builder.

    Die Leistung anwenderdefinierter Komponenten

    Die Erstellung anwenderdefinierter Komponenten verbessert die Effizienz, Konsistenz und Wartbarkeit in Ihrer gesamten Experience. Durch die Erstellung wiederverwendbarer UI-Elemente vermeiden Sie das Duplizieren von Konfigurationen, sorgen für ein einheitliches Erscheinungsbild und erleichtern die Verwaltung von Updates oder Designänderungen. Anwenderdefinierte Komponenten vereinfachen auch komplexe Layouts, unterstützen flexible Konfigurationen und ermöglichen einfacheres Testen und Debugging. Sie sind auch in Teamumgebungen hilfreich, in denen gemeinsam genutzte Komponenten dazu beitragen, die Zusammenarbeit zu optimieren und die Anwender-Experience im Umfang konsistent zu halten.

    Anwenderdefinierte Komponenten sind besonders nützlich, wenn Sie Seiten für verschiedene Anwendertypen in Ihrer Experience entwerfen. Sie können beispielsweise eine wiederverwendbare Komponente erstellen, die sowohl eine Liste als auch eine Datenvisualisierung enthält, und dann ihren Inhalt oder ihr Verhalten basierend auf der Anwendergruppe anpassen, sodass Sie ein konsistentes Layout beibehalten und rollenspezifische Informationen bereitstellen können.

    Im Komponentengenerator bearbeitete Komponenten werden automatisch auf allen Seiten aktualisiert, auf denen sie verwendet werden.

    Wichtig:
    Anwenderdefinierte Komponenten, die in einer Instanz erstellt wurden, bleiben nur innerhalb dieser Instanz verfügbar, bis sie mithilfe von Update-Sätzen oder Anwendungsinstallationen zu anderen Instanzen migriert werden.

    Anwenderdefinierte Komponenten oder Seitensammlungen

    Um effiziente, skalierbare digitale Experiences zu erstellen, ist es wichtig, Elemente nach Möglichkeit wiederzuverwenden. Dies kann über anwenderdefinierte Komponenten und Seitensammlungen erfolgen. Jede dient einem bestimmten Zweck, je nachdem, wie groß die Wiederverwendung ist.

    Anwenderdefinierte Komponenten
    Verwenden Sie anwenderdefinierte Komponenten, wenn Sie einen bestimmten Teil einer Seite wie eine Überschrift, eine Liste, ein Formular oder Schaltflächen auf mehreren Seiten replizieren möchten.
    Sie möchten ein konsistentes Design oder eine konsistente Konfiguration auf eine Komponente oder eine Gruppe von Komponenten anwenden.
    Sie entwerfen Seiten so, dass sie modular oder flexibel sind, wobei sich Teile einer Seite ändern können, freigegebene Komponenten jedoch konsistent bleiben.
    Sie möchten Changes an einem Ort verwalten und überall dort aktualisieren, wo die Komponente verwendet wird.
    Mehrere Teams arbeiten gleichzeitig an verschiedenen Abschnitten derselben Seite.
    Seitensammlungen
    Sie möchten ein gesamtes Seitenlayout und eine gesamte Konfiguration auf mehreren Seiten oder Experiences wiederverwenden.
    Sie müssen eine Variante von ganzen Seiten für verschiedene Anwender oder Workflows erstellen.

    Sie möchten eine Reihe von Registerkarten auf mehreren Seiten oder Experiences verwenden.

    Anwenderdefinierte Komponenten-UI

    Sie können in auf den Komponentengenerator zugreifen UI BuilderDurch Auswahl Erstellen Im Header oder in Komponente Kachel auf UI BuilderHomepage.

    Abbildung : 1. UI Builder-Homepage
    UI Builder-Homepage mit Pfeilen, die auf die Schaltflächen „Komponentenerstellung“ verweisen.
    Abbildung : 2. Komponentengenerator-UI
    Komponentengenerator-Homepage.

    Komponenten mit erstellt UI BuilderKann in der Toolbox gefunden werden, wenn eine Komponente zu einer Seite hinzugefügt wird, und in der Komponentenliste auf der Homepage von UI Builder. Sie können anwenderdefinierte Komponenten aktualisieren oder ändern, indem Sie sie in der Komponentenliste auf der Homepage von suchen UI Builder.

    Abbildung : 3. Testwerte im Komponentengenerator
    Das modale Dialogfeld für alt-Text wird angezeigt, wenn Testwerte ausgewählt sind.

    Verwenden Sie Testwerte im Komponentengenerator, um beim Erstellen einer anwenderdefinierten Komponente simulierte Werte für erforderliche und optionale URL-Parameter bereitzustellen. Testwerte helfen zu validieren, wie eine Komponente reagiert, wenn sie einer Seite hinzugefügt wird, indem sie sicherstellen, dass Bindungen und Datenressourcen ordnungsgemäß funktionieren. Weitere Informationen zu Testwerten finden Sie unter Testwerte auf einer Seite.

    Abbildung : 4. Komponentenliste
    UI Builder-Homepage, auf der die Registerkarte „Komponenten“ angezeigt wird.

    Sie können eine anwenderdefinierte Komponente auf dem Bildschirm mit den Komponenteneinstellungen schnell duplizieren, indem Sie auswählen Duplikat , Wodurch eine genaue Kopie der Komponente zur Wiederverwendung oder Änderung erstellt wird.

    Abbildung : 5. Anwenderdefinierte Komponenteneinstellungen
    Komponenteneinstellungsbildschirm mit einem Pfeil, der die Option „Duplizieren“ anzeigt.

    Komponentengenerator vs. NOW CLI-Komponentenentwicklung

    Es gibt zwei Möglichkeiten, Komponenten für zu erstellen UI Builder. Der erste verwendet die Low-Code-Komponente in UI Builder, Die eine Drag-and-Drop-Schnittstelle zum Erstellen anwenderdefinierter Komponenten bietet. Die zweite wird verwendet NOW CLI-Entwicklertools Zum Erstellen von Komponenten durch Code. Beide Methoden erzeugen Komponenten, die der UIB-Toolbox hinzugefügt und in Experiences wiederverwendet werden können. Beachten Sie, dass sich Änderungen an enthaltenen Komponenten auf beide Typen auswirken können.

    Obwohl beide Tools Komponenten für erstellen UI Builder, Es gibt wichtige Unterschiede, die berücksichtigt werden müssen.

    Komponentengenerator in UI Builder:
    • Komponenten, die in erstellt wurden UI BuilderKann auf Controller und Datenressourcen verweisen.
    • Erstellt „Macroponent-Komponenten“, die in der Tabelle „sys_ux_macroponent“ gespeichert werden.
    • Der Komponentengenerator ist ideal für Anwender, die eine visuelle Drag-and-Drop-Oberfläche zum Erstellen von Komponenten bevorzugen.
    • Ideal für die schnelle Erstellung einfacher bis mäßig komplexer Komponenten.
    NOW CLI-Komponenten:
    • Vorgesehen für Entwickler, die anwenderdefinierte HTML, CSS und JavaScript schreiben müssen.
    • Geeignet zum Erstellen komplexer und anpassbarer Komponenten.
    • Mit NOW CLI erstellte Komponenten werden in der Tabelle „sys_uib_toolbox_component“ gespeichert.

    Best Practices

    Die UI BuilderDer anwenderdefinierte Komponentengenerator verfügt nicht über Governance-Fähigkeiten und kann zu Duplizierungen und Inkonsistenzen in Ihrer Experience führen. Teams können ähnliche Komponenten mit leichten Variationen erstellen, was zu einer fragmentierten Anwenderoberfläche und verwirrender Anwender-Experience führt. Es wird empfohlen, dass Ihr Team regelmäßige Audits und eine teamübergreifende Kommunikation durchführt, um die Ausrichtung zu gewährleisten und Fragmentierung zu vermeiden, wenn Ihre Experiences wachsen.

    Alle Komponenten sind so konzipiert, dass sie Upgrade sicher sind, solange ihre Sicherheitsrichtlinie auf festgelegt ist Schreibgeschützt . Dies bietet im Vergleich zu anderen bereitstellbaren Einheiten wie Paketen und Seitenvorlagen einen besseren Upgrade-Schutz für größere Komponenten oder Seitenelemente. Dies bedeutet jedoch auch, dass sofort einsatzbereite Komponenten (OOTB) möglicherweise nicht bearbeitet werden können.

    Erstellen Sie Komponenten, die seitenübergreifend wiederverwendet werden sollen

    Erstellen Sie wiederverwendbare anwenderdefinierte Komponenten, die über Experiences und Seiten in hinweg verwendet werden können UI Builder.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    In diesem Beispiel des Komponentengenerators erstellen wir eine Stoppuhrkomponente, um die verstrichene Zeit nachzuverfolgen, die jeder Seite hinzugefügt werden kann. Die Komponente enthält anpassbare Eigenschaften, die geändert werden können, sobald sie auf einer Seite platziert wurde.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
    2. Wählen Sie Aus Erstellen Von UI BuilderHomepage.
      UI Builder-Homepage mit der Schaltfläche „Komponente erstellen“.
    3. Wählen Sie Aus Komponente .
    4. Füllen Sie die Felder des Formulars aus.
      Abbildung : 6. Dialogfeld „Komponente erstellen“
      Erstellen Sie ein Komponentenformular.
      Tabelle : 1. Erstellen Sie ein Komponentenformular
      Feld Beschreibung
      Name Fügen Sie einen Namen hinzu, um Ihre Komponente intern nachzuverfolgen. Der Komponentenname wird in der Toolbox angezeigt. Für dieses Beispiel ist es Stoppuhr .
      Kategorien Fügen Sie Ihrer Komponente eine Kategorie hinzu, damit sie in der Toolbox leicht gefunden werden kann. Sie können die Kategorie später in den Einstellungen aktualisieren. Wählen Sie für dieses Beispiel aus Inhalt .
      Beschreibung Fügen Sie eine Beschreibung hinzu, um zu beschreiben, wann und wie Ihre Komponente verwendet werden soll.
      Symbol Wählen Sie ein Symbol aus, um die Komponente in der Toolbox darzustellen.
    5. Wählen Sie Erstellen aus.
      Die Seite wird in der Komponentengeneratoransicht geöffnet.

      Anwenderdefinierte Komponentenerstellungs-UI, die den Inhalt und die Konfigurationsseitenleisten anzeigt.

    6. Fügen Sie eine anwenderdefinierte Komponenteneigenschaft hinzu, indem Sie auswählen + Eigenschaft hinzufügen In Eigenschaften und Richtlinie Abschnitt.
      Wählen Sie Eigenschaft hinzufügen aus, um Inhalt hinzuzufügen
      1. Wählen Sie in der Liste Zeichenfolge aus.
      2. Geben Sie die folgenden Werte im Konfigurationsbereich ein.
        Tabelle : 2. Komponenteneigenschaften
        Feld Wert
        Eigenschaftsbezeichnung SVG-Bildquelle
        Eigenschafts-ID SvgImageSource
        Standardwert animateddino.svg

        Anwenderdefinierte Komponentenerstellungs-UI mit Pfeilen, die auf die Felder Eigenschaftsbezeichnung, Eigenschafts-ID und SVG-Bildquelle im Konfigurationsbereich verweisen.

      3. Wählen Sie Speichern.
    7. Konfigurieren Sie das Layout für die anwenderdefinierte Komponente, indem Sie auswählen + Inhalt Hinzufügen Schaltfläche.
      1. Wählen Sie Aus Einzelne Spalte , Und wählen Sie dann aus Hinzufügen .
      2. In der Inhaltsstruktur unter Spalte 1 , Auswählen +Inhalt hinzufügen .
      3. Wählen Sie Aus Kartenbasiscontainer , Und wählen Sie dann aus Hinzufügen .
      4. In der Inhaltsstruktur unter Kartenbasiscontainer 1 , Auswählen + Inhalt hinzufügen .
      5. Wählen Sie Aus Layouts .
      6. Wählen Sie Aus Flexbox , Und wählen Sie dann aus Hinzufügen .
      7. Wählen Sie Speichern.
        Fügen Sie einem Container Inhalt hinzu
    8. Fügen Sie in unserem Flexbox-Container eine stilisierte Textkomponente hinzu, indem Sie auswählen + Inhalt hinzufügen Unter Container 1 .
      1. Wählen Sie aus Stilisierter Text Komponente, und wählen Sie dann aus Hinzufügen .
      2. Wählen Sie Aus Abbrechen Zum Schließen des voreingestellten Fensters.
      3. Wählen Sie Speichern.
        Fügen Sie einem Container stilisierten Text hinzu
    9. Zum Konfigurieren der stilisierten Textkomponente fügen wir einige Client-Statusparameter hinzu.
      1. Wählen Sie Aus Client-Statusparameter In Daten und Skripts Abschnitt.
      2. In Bearbeiten Sie Client-Statusparameter Geben Sie die folgenden Werte ein:
        Tabelle : 3. Statusparameter für Clients
        Name Typ Anfänglicher Wert
        startTime Nummer
        Verstrichene Zeit Zeichenfolge 00:00:00
        zeitintervall JSON
        StopwatchRunning Boolean
        Intervall-ID Zeichenfolge
      3. Wählen Sie Übernehmen.
        Liste der Client-Statusparameter, die der anwenderdefinierten Komponente hinzugefügt wurden.
      4. Wählen Sie Speichern.
    10. Um die stilisierte Textkomponente zu konfigurieren, binden wir an Verstrichene Zeit Client-Statusparameter.
      1. Wählen Sie aus Stilisierter Text 1 Komponente in der Inhaltsstruktur.
      2. Wählen Sie das Bindungssymbol aus, wenn Sie auf zeigen Text Feld der stilisierten Textkomponente.
        Binden Sie stilisierten Text in der Komponente
      3. Wählen Sie Aus clientstatus .
      4. Doppelklicken Sie auf Verstrichene Zeit Pille.
        Binden Sie den Parameter für die verstrichene Zeit an Text
      5. Wählen Sie Übernehmen.
      6. Wählen Sie Speichern.
    11. Fügen Sie einen Flexbox-Container hinzu, um die Schaltflächen zu enthalten.
      1. Wählen Sie aus + Symbol unter der stilisierten Textkomponente.
        Wählen Sie das Pluszeichen unter der Textkomponente aus
      2. Wählen Sie Aus Layouts .
      3. Wählen Sie Aus Flexbox .
      4. Wählen Sie Hinzufügen.
    12. Fügen Sie den ausgeführten Renderer für die Stoppuhr und die Schaltfläche „Start“ hinzu, und konfigurieren Sie sie.
      1. Wählen Sie Aus + Inhalt hinzufügen In dem Container, den Sie im vorherigen Schritt hinzugefügt haben, und fügen Sie ein hinzu Bedingter Renderer .
      2. Wählen Sie Aus + Bedingung hinzufügen In der Inhaltsstruktur.
      3. Wählen Sie Aus Einzelne Komponente , Und wählen Sie dann aus Weiter .
      4. Wählen Sie Aus Symbolschaltfläche , Und wählen Sie dann aus Weiter .
      5. In Bearbeiten Sie die Einstellungen Geben Sie die folgenden Werte ein:
        • Komponentenbezeichnung: Starten
        • Komponenten-ID: Start_button
        • Inhalt rendern: Immer
      6. Wählen Sie Übernehmen.
      7. Wählen Sie aus Starten Schaltfläche in der Inhaltsstruktur.
      8. Legen Sie die folgenden Eigenschaften im Konfigurationsbereich fest.
        Tabelle : 4. Komponenteneigenschaften
        Feld Wert
        Symbol Stoppuhr-füllen
        Variante Primär
        Größe Groß
        Tooltip-Text Start
      9. Wählen Sie Speichern.
        Anwenderdefinierte Komponentenerstellungs-UI mit Pfeilen, die auf die Komponentenbezeichnung verweisen, und Textfeldern für Symbol, Variante, Größe und Tooltip im Konfigurationsbereich.
    13. Konfigurieren Sie die Schaltfläche „Stoppen“, die angezeigt wird, während die Stoppuhr ausgeführt wird.
      1. Wählen Sie Aus + Bedingung hinzufügen In der Inhaltsstruktur.
      2. Wählen Sie Aus Leerer Container , Und wählen Sie dann aus Weiter .
      3. In Bearbeiten Sie die Einstellungen Geben Sie die folgenden Werte ein:
        • Komponentenbezeichnung: Wird Ausgeführt
        • Komponenten-ID: Running_Container
        • Inhalt rendern: Wenn die folgende Bedingung „wahr“ ist
      4. Wählen Sie das Bindungssymbol aus, während Sie auf zeigen Bedingung Feld.
        Modal „Einstellungen bearbeiten“, in dem Sie binden möchten
      5. Wählen Sie Aus clientstatus , Doppelklicken Sie dann auf StopwatchRunning Pille.
      6. Wählen Sie Übernehmen.
      7. Wählen Sie Übernehmen.
      8. Wählen Sie Aus + Inhalt hinzufügen In Wird Ausgeführt Container und fügen Sie ein hinzu Symbolschaltfläche .
      9. Wählen Sie Aus Symbolschaltfläche 1 Geben Sie im Konfigurationsbereich die folgenden Werte ein:
        • Komponentenbezeichnung: Anhalten
        • Komponenten-ID: Stop_button
      10. Wählen Sie Übernehmen.
      11. Legen Sie die folgenden Eigenschaften im Konfigurationsbereich fest.
        Tabelle : 5. Komponenteneigenschaften
        Feld Wert
        Symbol Stoppuhr-füllen
        Variante Sekundär
        Größe Groß
        Tooltip-Text Stoppen
      12. Wählen Sie Speichern.
        Anwenderdefinierte Komponentenerstellungs-UI mit Pfeilen, die auf die Komponentenbezeichnung verweisen, und Textfeldern für Symbol, Variante, Größe und Tooltip im Konfigurationsbereich.
    14. Ordnen Sie die Bedingungen so neu an Wird Ausgeführt Wird oben angezeigt Starten .
      1. Wählen Sie Aus Bedingter Renderer 1 In der Inhaltsstruktur.
      2. Wählen Sie im Konfigurationsbereich das Ziehpunkt-Symbol aus, und ziehen Sie es Zum Verschieben der Bedingungen an Position.
        Bedingte Renderer-Komponente im Konfigurationsbereich mit der Bedingung „wird ausgeführt“ in der Nähe der Bedingung „Start“.

        Bedingungen werden in der Reihenfolge von oben nach unten ausgewertet, also Wird Ausgeführt Muss oben angezeigt werden Starten Damit die Schaltflächen korrekt angezeigt werden.

    15. Fügen Sie die Logik für die Komponente hinzu, indem Sie auswählen + Neben Client-Skripts In Daten und Skripts Abschnitt.
      1. Eingabetaste Starten In Skriptname Feld.
      2. Fügen Sie das folgende Skript in das Skriptfeld ein. 
        function handler({ api, helpers }) {
  console.log('Start script running');
 
  if (api.state.stopwatchRunning === undefined) {
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', null);
    api.setState('intervalId', null);
  }
 
  let running = api.state.stopwatchRunning;
 
  function pad(n) {
    return n < 10 ? '0' + n : n.toString();
  }
 
  function updateElapsedTime(startTime) {
    if (!running) {
      if (api.state.intervalId) {
        helpers.timing.clearInterval(api.state.intervalId);
        api.setState('intervalId', null);
        console.log('Interval cleared');
      }
      return;
    }
 
    if (!startTime) {
      console.log('No startTime passed to updateElapsedTime, cannot update');
      return;
    }
 
    const now = Date.now();
    const elapsedMs = now - startTime;
 
    const totalSeconds = Math.floor(elapsedMs / 1000);
    const hours = pad(Math.floor(totalSeconds / 3600));
    const minutes = pad(Math.floor((totalSeconds % 3600) / 60));
    const seconds = pad(totalSeconds % 60);
 
    const formattedTime = `${hours}:${minutes}:${seconds}`;
 
    console.log('Setting elapsedTime:', formattedTime);
    api.setState('elapsedTime', formattedTime);
  }
 
  if (!running) {
    const now = Date.now();
 
    api.setState('startTime', now);
    api.setState('elapsedTime', '00:00:00');
    api.setState('stopwatchRunning', true);
    running = true;
 
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
      console.log('Existing interval cleared before starting new one');
    }
 
    // Pass startTime directly here
    updateElapsedTime(now);
 
    const id = helpers.timing.setInterval(() => {
      updateElapsedTime(now);
    }, 1000);
    api.setState('intervalId', id);
    console.log('Interval started with id:', id);
  } else {
    if (!api.state.intervalId) {
      // Use existing startTime from state, but be mindful it might still lag
      const storedStartTime = api.state.startTime || Date.now();
      const id = helpers.timing.setInterval(() => {
        updateElapsedTime(storedStartTime);
      }, 1000);
      api.setState('intervalId', id);
      console.log('Interval restarted with id:', id);
    }
  }
}
      3. Wählen Sie Übernehmen.
        Bearbeiten Sie das modale Element des Clientskripts, das den UI Builder-Editor überlagert.
      4. Wählen Sie Aus + Neben Client-Skripts Zum Hinzufügen eines zweiten Skripts.
      5. Eingabetaste Anhalten In Skriptname Feld.
      6. Fügen Sie das folgende Skript in das Skriptfeld ein. 
        function handler({ api, helpers }) {
  console.log('Stop script running');
 
  if (api.state.stopwatchRunning === undefined) {
    // If state is not initialized yet, initialize it to avoid errors
    api.setState('stopwatchRunning', false);
    api.setState('elapsedTime', '00:00:00');
    api.setState('startTime', 0);
    api.setState('intervalId', null);
  }
 
  if (api.state.stopwatchRunning) {
    api.setState('stopwatchRunning', false);
    if (api.state.intervalId) {
      helpers.timing.clearInterval(api.state.intervalId);
      api.setState('intervalId', null);
    }
  }
}
      7. Wählen Sie Übernehmen.
      8. Wählen Sie Speichern.
    16. Fügen Sie den Schaltflächen, die wir in den vorherigen Schritten erstellt haben, Ereignishandler hinzu.
      1. Wählen Sie aus Starten Schaltfläche in der Inhaltsstruktur, und öffnen Sie Ereignisse Registerkarte im Konfigurationsbereich.
      2. Wählen Sie Aus Handler hinzufügen Unter Symbolschaltfläche angeklickt , Und wählen Sie dann aus Starten Client-Skript, das wir in den vorherigen Schritten erstellt haben.
        Fügen Sie das modale Ereignis-Handler-Element mit einem Pfeil hinzu, der auf ein Client-Skript mit der Bezeichnung „Start“ verweist.
      3. Wählen Sie Aus Fahren Sie Fort , Und wählen Sie dann aus Hinzufügen .
      4. Wählen Sie aus Anhalten Schaltfläche in der Inhaltsstruktur, und öffnen Sie Ereignisse Registerkarte im Konfigurationsbereich.
      5. Wählen Sie Aus Handler hinzufügen , Und wählen Sie dann aus Anhalten Client-Skript, das wir in den vorherigen Schritten erstellt haben.
      6. Wählen Sie Aus Fahren Sie Fort , Und wählen Sie dann aus Hinzufügen .
      7. Wählen Sie Speichern.
    17. Wählen Sie Aus Vorschau Zum Testen der konfigurierten Komponenten.
      UI Builder-Vorschau der Seite mit ausgeführter Stoppuhr-Komponente.

    Ergebnisse

    Ihre anwenderdefinierte Komponente ist jetzt in verfügbar UI Buildertoolbox.