Zum Hauptinhalt springen

Strukturansicht

Strukturansicht in Storybook

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Strukturansicht und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel​

Eine einfache Strukturansicht ist eine TreeView-Komponente, die eine oder mehrere TreeNode-Komponenten umschließt. Jeder Knoten der Baumstruktur kann auch eigene verschachtelte TreeNode-Komponenten enthalten.

<TreeView>
  <TreeNode
    id="1"
    label="Fruit">
    <TreeNode
      id="2"
      label="Banana"
    />
    <TreeNode
      id="3"
      label="Apple"
    />
  </TreeNode>
  <TreeNode
    id="4"
    label="Vegetables (coming soon!)"
  />
</TreeView>

Beispiel für die nodes-Eigenschaft​

Sie können die nodes-Eigenschaft verwenden, um die Knoten für die Strukturansicht als Array von Objekten zu übergeben. Weitere Informationen zu den Werten, die an diese Eigenschaft übergeben werden können, finden Sie in der Aufstellung der Eigenschaften für Strukturknoten.

const foods = [
  {
    id: 'fruit',
    label: { id: 'foods.Fruit', defaultMessage: 'Fruit' },
    nodes: [
      {
        id: 'banana',
        label: { id: 'foods.Banana', defaultMessage: 'Banana' },
      },
      {
        id: 'apple',
        label: { id: 'foods.Apple', defaultMessage: 'Apple' },
      },
    ],
  },
  {
    id: 'vegetables',
    label: { id: 'foods.Vegetables', defaultMessage: 'Vegetables (coming soon!)' },
  },
];

<TreeView nodes={foods} />;

Beispiel für das Rendern von Knoten​

Wenn Sie bei der Verwendung der nodes-Eigenschaften bestimmte Werte der Knoten überschreiben möchten, können Sie dazu die renderNodes-Eigenschaft verwenden.

Das props-Objekt von renderNodes enthält Folgendes:

  • nodeId – die dem Knoten der Baumstruktur zugewiesene id
  • nodes – das an den Knoten der Baumstruktur übergebene Knotenobjekt

Das nodes-Objekt enthält verschachtelte Knoten, sodass Sie rekursiv vorgehen müssen, um die gesamte Baumstruktur darzustellen.

Wenn Sie beispielsweise bestimmte Stile auf jeden Knoten anwenden möchten, können Sie eine benutzerdefinierte Komponente erstellen, die die Liste der Knoten enthält und diese rekursiv als Strukturknoten rendert, während die Stile auf jeden einzelnen Knoten angewendet werden.


const foods = [ ... ]

const TomatoNodes = ({ nodes }) => {
  return (
    <>
      {nodes.map(({ id, label, nodes: childNodes }) => (
        <TreeNode
          id={id}
          label={label}
          style={{
            backgroundColor: 'tomato',
            color: 'blue',
            border: '1px solid yellow',
          }}>
          {childNodes && <TomatoNodes nodes={childNodes} />}
        </TreeNode>
      ))}
    </>
  );
};

<TreeView
  nodes={foods}
  renderNodes={TomatoNodes}
/>

Beispiel für einen Filter​

Wenn Sie ein Filterfeld in Ihre Strukturansicht aufnehmen wollen, fügen Sie die showFilter-Eigenschaft hinzu. Das Feld verwendet eine Standardfilterfunktion. Wenn Sie diese überschreiben möchten, verwenden Sie die filterCallback-Eigenschaft.

Die filterCallback-Funktion benötigt zwei Argumente:

  • die übersetzte Beschriftung des Elements der Baumstruktur
  • die Filterabfrage, die der Benutzer in das Filterfeld eingegeben hat

Die Funktion muss ein Array von Indizes zurückgeben, die Bereiche anzeigen, in denen die Bezeichnung mit der Abfrage übereinstimmt, z. B. [{ start: 2, end: 4 }, { start: 7, end: 9 }].

Wenn die Abfrage nicht übereinstimmt, muss die Funktion null zurückgeben.

Im folgenden Beispiel werden nur Einträge gefunden, deren Beschriftung mit der Abfrage beginnt (Groß- und Kleinschreibung wird berücksichtigt).

const foods = [ ... ]

const filterFunction (value, query) => {
    if (value.startsWith(query)) {
      return [{ start: 0, end: query.length }];
    }

    return null;
  }

<TreeView
  showFilter
  nodes={foods}
  filterCallback={filterFunction}
/>

Beispiel für einen Filter mit Eigenschaften​

Das Filterfeld ist ein standardmäßiges Jutro-Texteingabefeld. Mit der Eigenschaft filterProps können Sie zusätzliche Eigenschaften übergeben.

const foods = [ ... ]

const filterFunction (value, query) => { ... }

<TreeView
  showFilter
  filterCallback={filterFunction}
  filterProps={{
    placeholder: 'Item starts with...',
  }}
/>