Definieren von Schaltflächen

Definieren Sie im Bereich Schaltflächen zusätzliche Schaltflächen. So können Sie Verknüpfungen aus der Oberfläche von d.velop contracts for Microsoft 365 konfigurieren.

Sie können Schaltflächen auf Vertragsebene, Dokumentebene und übergreifender Ebene erstellen.

Definieren von übergreifenden Schaltflächen

Definieren von Schaltflächen im 9-Punkte-Menü oder auf dem Dashboard

Die zusätzlichen Schaltflächen können im 9-Punkte-Menü und/oder auf dem Dashboard angezeigt werden.

So geht's

title: Der Bereich enthält die Überschrift, die auf dem Dashboard angezeigt wird, in verschiedenen Sprachen. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
showInDashboard: Mit den Werten true oder false definieren Sie, ob die zusätzlichen Schaltflächen auf dem Dashboard unterhalb der Suchvorlagen angezeigt werden.
showInMenu: Mit den Werten true oder false definieren Sie, ob die zusätzlichen Schaltflächen im 9-Punkte-Menü nach den vom System vorgegebenen Schaltflächen angezeigt werden.
buttons: Definieren Sie hier die gewünschten Schaltflächen.

Es gibt zwei Arten von Schaltflächen:

LinkButton: Diese Schaltfläche öffnet bei Klick eine neue Registerkarte mit dem spezifizierten Link.
GroupButton: Diese Schaltfläche klappt bei Klick ein weiteres Menü aus, das Schaltflächen beider Typen enthalten kann.

LinkButton

link: Link, der beim Klick auf die Schaltfläche aufgerufen wird.
icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
showInPanel (optionaler Parameter): mit den Werten true oder false wird gesteuert, ob die URL in einem Seitenpanel geöffnet wird.
panelSize (optionaler Parameter): Breite des Panels in Pixel.

GroupButton

icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
subMenuButtons: Eine Auflistung von LinkButtons oder GroupButtons.

Beispielkonfiguration

{
    "title": {
        "de": "Prozesse",
        "en": "Processes"
    },
    "showInDashboard": true,
    "showInMenu": true,
    "buttons": [
        {
            "link": "https://tenant.sharepoint.com/sites/testsite/testweb",
            "icon": "PanelRightExpandRegular",
            "text": {
                "de": "Zeige Test",
                "en": "Show Test"
            },
            "showInPanel": true,
            "panelSize": 1024
        },
        {
            "icon": "MoreHorizontalRegular",
            "text": "More",
            "subMenuButtons": [
                {
                    "link": "https://tenant.sharepoint.com/sites/testsite/testweb2",
                    "icon": "LinkRegular",
                    "text": {
                        "de": "Springe zum Test 2",
                        "en": "Jump to Test 2"
                    }
                },
                {
                    "link": "https://tenant.sharepoint.com/sites/testsite/testweb3",
                    "icon": "MailLinkRegular",
                    "text": {
                        "de": "Springe zum Test 3",
                        "en": "Jump to Test 3"
                    }
                }
            ]
        }
    ]
}

Definieren von Schaltflächen auf Vertragsebene

Die zusätzlichen Schaltflächen werden innerhalb der Befehlsleiste auf der Vertragsansichtsseite angezeigt.

Es gibt zwei Arten von Schaltflächen:

LinkButton: Diese Schaltfläche öffnet bei Klick eine neue Registerkarte mit dem spezifizierten Link.
GroupButton: Diese Schaltfläche klappt ein weiteres Menü aus. In diesem Menü können sich weitere Schaltflächen von beiden Typen befinden.

LinkButton

link: Link, der beim Klick auf die Schaltfläche aufgerufen wird. Folgende Platzhalter stehen zur Verfügung:
- ${list.id}: ID der Liste.
- ${list.url}: Serverrelative Listen-URL.
- ${item.id}: ID des ListItems.
- ${item.internalFieldName}: internalFieldName bestimmt das Feld, das aus dem Listitem übernommen werden soll.
icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
showButtonIf (Optional): Ohne showButtonIf-Objekt wird die Schaltfläche immer in der Vertragsansicht angezeigt.
- conditions: Die Bedingungen, unter denen die Regel angewendet wird, können wie folgt konfiguriert werden:
  - all: Alle Bedingungen in dieser Liste müssen erfüllt werden.
  - any: Irgendeine dieser Bedingungen muss erfüllt werden.
    In den all- oder any-Listen können weitere Bedingungen mit all oder any geschrieben werden. Eine Bedingung kann mit folgenden Optionen angegeben werden:
    fact: Eine Spalte aus dem Vertrag.
    path (Optional): Kann benutzt werden, wenn der fact ein Objekt ist und man auf eine Eigenschaft zugreifen möchte (siehe Beispielkonfiguration).
    operator:
    Für Text:
    equal
    notEqual
    startsWith
    Für Zahlen:
    greaterThan
    lessThan
    greaterThanInclusive
    lessThanInclusive
    Für Arrays:
    in: fact muss in der Liste value enthalten sein.
    notIn: fact darf nicht in der Liste value enthalten sein.
    contains: Die Liste fact muss value enthalten.
    doesNotContain: Die Liste fact darf nicht value enthalten.
showInPanel (optional): Mit den Werten true oder false definieren Sie, ob die URL in einem Seitenpanel geöffnet wird.
panelSize (optional): Breite des Panels in Pixel.

GroupButton

icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
subMenuButtons: Eine Auflistung von LinkButtons oder GroupButtons.
showButtonIf: Gleiche Konfiguration wie bei LinkButton.

Beispielkonfiguration

[
    {
        "link": "https://tenant.sharepoint.com/sites/testsite/testweb/${item.Title}",
        "icon": "Shield",
        "text": {
            "de": "Springe zum Test",
            "en": "Jump to Test"
        },
                "showInPanel": true,
                "panelSize": 1024,
        "showButtonIf": {
            "conditions": {
                "all": [
                    {
                        "fact": "Title",
                        "path": "title",
                        "operator": "equal",
                        "value": "Test"
                    }
                ]
            }
        }
    },
    {
        "link": "https://tenant.sharepoint.com/sites/testsite/testweb/${item.Title}",
        "icon": "Shield",
        "text": {
            "de": "Test2",
            "en": "Test2"
        },
        "showButtonIf": {
            "conditions": {
                "all": [
                    {
                        "fact": "ecsContractType",
                        "path": "$.contentType",
                        "operator": "equal",
                        "value": "IT-Vertrag"
                    }
                ]
            }
        }
    },
    {
        "icon": "More",
        "text": "More",
        "subMenuButtons": [ ],
        "showButtonIf":{}
    }
]

Definieren von Schaltflächen auf Dokumentebene

Die zusätzlichen Schaltflächen werden innerhalb des Dreipunktemenüs auf Dokumentebene angezeigt.

Es gibt zwei Arten von Schaltflächen:

LinkButton: Diese Schaltfläche öffnet bei Klick eine neue Registerkarte mit dem spezifizierten Link.
GroupButton: Diese Schaltfläche klappt ein weiteres Menü aus. In diesem Menü können sich weitere Schaltflächen von beiden Typen befinden.

LinkButton

link: Link, der beim Klick auf der Schaltfläche aufgerufen wird. Folgende Platzhalter stehen zur Verfügung:
- ${list.id}: ID der Liste.
- ${list.url}: Serverrelative Listen-URL.
- ${item.id}: ID des ListItems.
- ${item.internalFieldName}: internalFieldName bestimmt das Feld, das aus dem Listitem übernommen werden soll.
- ${doc.internalFieldName}: internalFieldName bestimmt das Feld, das aus dem Dokument übernommen werden soll.
icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
showButtonIf (Optional): Ohne showButtonIf-Objekt wird die Schaltfläche immer in der Vertragsansicht angezeigt.
- conditions: Die Bedingungen, unter denen die Regel angewendet wird, können wie folgt konfiguriert werden:
  - all: Alle Bedingungen in dieser Liste müssen erfüllt werden.
  - any: Irgendeine dieser Bedingungen muss erfüllt werden.
    In den all- oder any-Listen können weitere Bedingungen mit all oder any geschrieben werden. Eine Bedingung kann mit folgenden Optionen angegeben werden:
    fact: Eine Eigenschaft aus dem Vertrag oder einem Dokument. Wenn eine Eigenschaft aus einem Dokument verwendet werden soll, muss “fact” : "doc" sein. Anschließend kann über "path": "$internalFieldName" auf die Eigenschaft zugegriffen werden.
    path (Optional): Kann benutzt werden, wenn der fact ein Objekt ist und man auf eine Eigenschaft zugreifen möchte (siehe Beispielkonfiguration).
    operator:
    Für Text:
    equal
    notEqual
    startsWith
    Für Zahlen:
    greaterThan
    lessThan
    greaterThanInclusive
    lessThanInclusive
    Für Arrays:
    in: fact muss in der Liste value enthalten sein.
    notIn: fact darf nicht in der Liste value enthalten sein.
    contains: Die Liste fact muss value enthalten.
    doesNotContain: Die Liste fact darf nicht value enthalten.
showInPanel (optional): Mit den Werten true oder false definieren Sie, ob die URL in einem Seitenpanel geöffnet wird.
panelSize (optional): Breite des Panels in Pixel.

GroupButton

icon: Name des Fluent UI-Icons, das angezeigt werden soll. Die Liste der verfügbaren Icons finden Sie unter https://react.fluentui.dev/?path=/docs/icons-catalog--page.
text: Anzeigetext der Schaltfläche je Sprache. Erstellen Sie Übersetzungen für alle Sprachen, die von der Anwendung unterstützt werden. Tragen Sie die Übersetzungen als Werte bei den ensprechenden Sprachkürzeln ein. Mögliche Sprachkürzel: de, en, fr, it, nl, pt, es, pl.
subMenuButtons: Eine Auflistung von LinkButtons oder GroupButtons.
showButtonIf: Gleiche Konfiguration wie bei LinkButton.

Beispielkonfiguration

[
    {
        "link": "https://tenant.sharepoint.com/sites/testsite/testweb/${item.Title}",
        "icon": "Shield",
        "text": {
            "de": "Springe zu Test",
            "en": "Jump to Test"
        },
        "showInPanel": true,
        "panelSize": 1024,
        "showButtonIf": {
            "conditions": {
                "all": [
                    {
                        "fact": "Title",
                        "path": "Title",
                        "operator": "equal",
                        "value": "Test"
                    },
                    {
                        "fact": "doc",
                        "path": "$.fileType",
                        "operator": "startsWith",
                        "value": "docx"
                    }
                ]
            }
        }
    },
    {
        "icon": "More",
        "text": "Mehr",
        "subMenuButtons": [
            {
                "text": {
                    "de": "Test"
                    "en": "Test"
                },
                "link": "test.de",
                "showInPanel": true
            },
            {
                "text": "Test2",
                "subMenuButtons": [
                    {
                        "text": {
                            "de": "d.velop"
                        },
                        "link": "https://d-velop.de"
                    }
                ]
            }
        ]
    }
]

Helfen Sie uns, besser zu werden!

Definieren von Schaltflächen

Definieren von übergreifenden Schaltflächen

Definieren von Schaltflächen auf Vertragsebene

Definieren von Schaltflächen auf Dokumentebene

Helfen Sie uns, besser zu werden!