Zum Hauptinhalt springen

Zugriff auf Auswahlen: Keys

Innerhalb einer Erweiterung müssen Konfigurationsschritte, Merkmale und ihre Werte eindeutig identifziert werden können. Zum Beispiel soll ein dynamisches 3D-Modell etwas zeigen, dessen Länge in einer Variable "Länge" vom Nutzer eingegeben wird. Dann muss der Wert der Variable natürlich zur Verfügung stehen.

Die Lösung dafür sind stable unique identifier namens keys. Diese sollten einzigartig vergeben werden und können dann im Code verwendet werden.

Im Gegensatz zu Lables sind diese Bezeichner nicht anfällig für Änderungswünsche der Kunden und im Gegensatz zu Ids bleiben diese auch beim Ex- und Import von Konfiguratoren stabil.

tip

Keys müssen einmalig aktiviert werden. Dazu

  • meldet man sich an,
  • wechselt in sein Profil (Klick auf die Email in der Navigationsleiste und dann Profil)
  • und schaltet dort den "Entwickler-Modus" ein.

Der Key kann folgendermaßen gesetzt werden:

  • Für Gruppen in der Gruppeneditierung
  • Für Merkmale im Tab Optionen der Merkmalseditierung
  • Für Werte in der Wertetablle des jeweiligen Merkmals
  • Für Attribute in der Wertetablle des Merkmals in der Attributsspalte auf die drei Punkte und dann auf ändern.

Dann kann man im Code mit den hooks:

  • useSelectedNumberByVariableKey
  • useSelectedValueByVariableKey
  • useSelectedValueAttributeByKey

auf die enstprechenden aktuellen Auswahlen zugreifen.

Alternativ lässt sich mit

  • useGroupByKey
  • useVariableByKey
  • useValueByKey

direkt auf die Entitäten zugreifen.

Beispiel​

import React from 'react';
import { useSelectedNumberByVariableKey } from '@k3/core';

export const CustomBox = () => {
  const width = useSelectedNumberByVariableKey('breite') ?? 1;
  const length = useSelectedNumberByVariableKey('laenge') ?? 1;
  const depth = useSelectedNumberByVariableKey('tiefe') ?? 1;

  return (
    <mesh>
      <boxGeometry args={[width, length, depth]} />
      <meshStandardMaterial />
    </mesh>
  );
};

dann muss man nur noch die entsprechenden Variablen im Konfigurator erstellen, mit den richtigen Keys (breite, laenge, tiefe) versehen und hat ein parametrisiertes 3D-Modell.

Mehr dazu gibt es im nächsten Kapitel.