5.23.3.6. Benutzerdefinierter Tab

Mit den folgenden Schritten können Sie einen benutzerdefinierten Tab erstellen:

  1. Kopieren Sie den folgenden Abschnitt in die custom_config.json Datei innerhalb der geschweiften Klammern.

      "digitalTwinTabSettings": {
        "customTabs": [
          {
            "id": "customTab",
            "name": {
              "de-DE": "Zusatzinformationen",
              "en-GB": "Additional information"
            },
            "url": "/plugins/tabContent.html?NB=$NB."
          }
        ]
      }
    

    Mögliche URL Parameter

    Sie können verschiedene Parameter angeben, welche an das HTML übergeben werden. Nutzen Sie dazu dieses Schema:

    <beliebiger Parametername>=$<key>.

    Folgende Paramater sind möglich:

    ORDERNO, PATH, MIDENT, NN, NB, NT, LINA, LINEID, LINESUBID, VARIABLENNAME, CATALOG und CATALOGNAME

    CATALOG: enhält den internen Katalognamen, z.B. a4hydrauliek

    CATALOGNAME: enthält den sichtbaren Katalognamen, z.B. A4Hydrauliek / Mures Hydraulici

    Verknüpfen Sie mehrere Parameter mit &.

    Beispiel mit allen Parametern (wie in Abb. oben)

    "url": "/plugins/tabContent.html?Order number=$ORDERNO.&pfad=$PATH.&MIDENT=$MIDENT.
     &Standard number=$NN.&Standard name=$NB.&Standard text=$NT.&BOM name=$LINA.
     &LineId=$LINEID.&LineSubId=$LINESUBID.&Diameter=$D.",

  2. Erstellen Sie im Ordner $CADENAS_SITESETUP/3df/plugins eine neue HTML-Datei "tabContent.html" und kopieren Sie folgenden Inhalt hinein. Wenn der Ordner nicht vorhanden ist, erstellen Sie ihn.

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
    
      <body>
        <div>Custom Tab Content</div>
        <div>Url Params:</div>
    
        <script>
          window.addEventListener("load", () => {
            const queryParams = new URLSearchParams(window.location.search);
            queryParams.forEach((value, key) => {
              const div = document.createElement("div");
              div.textContent = `${key} - ${value}`;
              document.body.appendChild(div);
            });
          });
        </script>
      </body>
    </html>
  3. Der Tab sollte jetzt in 3Dfindit angezeigt werden.

  4. Optional:

    Sie können die Anzeige des Tabs mit Bedingungen einschränken. Verwenden Sie dazu "condition".

    Dies funktioniert ausschließlich für die beiden Parameter erpRole und catalog. Für catalog können auch Unterverzeichnisse angegeben werden.

    Beispiel 1:

    "condition": {
              "erpRole": ["DUMMY"],
              "catalog": ["a4hydrauliek"]
            }

    Beispiel 2:

    "condition": {
              "catalog": ["norm/iso"]
            }

    Fügen Sie den Code hinter "url" ein und achten Sie darauf, die beiden Befehle mit einem Komma zu separieren.

            ...
            "url": "/plugins/tabContent.html?NB=$NB.",
            "condition": {
              "erpRole": ["DUMMY"],
              "catalog": ["a4hydrauliek"]
            }
          }