Open Documentation Menu

Defining buttons

Define additional buttons in the Buttons area. In this way you can configure outgoing links from the d.velop contracts for Microsoft 365 interface.

You can create buttons at contract level, document level and overall level.

Defining general buttons

Defining buttons in the 9-dot menu or on the dashboard 

The additional buttons can be displayed in the 9-dot menu and/or on the dashboard.

This is how it works 

  • title: The area contains the heading displayed on the dashboard in different languages. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • showInDashboard: Use the values true or false to define whether the additional buttons are shown on the dashboard below the search templates.

  • showInMenu: Use the values true or false to define whether the additional buttons in the 9-dot menu are displayed after the buttons defined by the system.

  • buttons: Define the desired buttons here.

There are two types of buttons:

  1. LinkButton: This button, when clicked, opens a new tab with the specified link.

  2. GroupButton: When clicked, this button opens another menu that can contain buttons of both types.

LinkButton: 

  • link: Link that is opened when the button is clicked.

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • showInPanel (optional parameter): Use the values true or false to control whether the URL is opened in a side panel.

  • panelSize (optional parameter): Width of the panel in pixels.

GroupButton 

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • subMenuButtons: A list of LinkButtons or GroupButtons.

Example configuration 

{
    "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"
                    }
                }
            ]
        }
    ]
}
Defining buttons at contract level

The additional buttons are displayed within the command bar on the contract view page.

There are two types of buttons:

  1. LinkButton: This button, when clicked, opens a new tab with the specified link.

  2. GroupButton: This button opens another menu. This menu can contain other buttons of both types.

LinkButton: 

  • link: Link that is opened when the button is clicked. The following placeholders are available: 

    • ${list.id}: ID of the list.

    • ${list.url}: Server-relative list URL.

    • ${item.id}: ID of the list item.

    • ${item.internalFieldName}: internalFieldName specifies the field to be taken from the list item.

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • showButtonIf (optional): Without the showButtonIf object, the button is always displayed in the contract view.

    • conditions: The conditions under which the rule is applied can be configured as follows:

      • all: All conditions in this list must be met.

      • any: Any of these conditions must be met.

        The all or any lists can contain further conditions with all or any. A condition can be specified with the following options:

        • fact: A column from the contract.

        • path (optional): Can be used if the fact is an object and you want to access a property (see example configuration).

        • operator:

          • For text:

            • equal 

            • notEqual 

            • startsWith 

          • For numbers:

            • greaterThan 

            • lessThan 

            • greaterThanInclusive 

            • lessThanInclusive 

          • For arrays:

            • in: fact must be included in the value list.

            • notIn: fact must not be contained in the value list.

            • contains: The fact list must contain value.

            • doesNotContain: The fact list must not contain value.

  • showInPanel (optional): Use the values true or false to define whether the URL is opened in a side panel.

  • panelSize (optional): Width of the panel in pixels.

GroupButton 

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • subMenuButtons: A list of LinkButtons or GroupButtons.

  • showButtonIf: Same configuration as for LinkButton.

Example configuration 

[
    {
        "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":{}
    }
]
Defining buttons at the document level

The additional buttons are displayed within the three-dot menu at the document level.

There are two types of buttons:

  1. LinkButton: This button, when clicked, opens a new tab with the specified link.

  2. GroupButton: This button opens another menu. This menu can contain other buttons of both types.

LinkButton: 

  • link: Link that is opened when the button is clicked. The following placeholders are available:

    • ${list.id}: ID of the list.

    • ${list.url}: Server-relative list URL.

    • ${item.id}: ID of the list item.

    • ${item.internalFieldName}: internalFieldName specifies the field to be taken from the list item.

    • ${doc.internalFieldName}: internalFieldName specifies the field to be taken from the document.

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • showButtonIf (optional): Without the showButtonIf object the button is always displayed in the contract view.

    • conditions: The conditions under which the rule is applied can be configured as follows:

      • all: All conditions in this list must be met.

      • any: Any of these conditions must be met.

        The all or any lists can contain further conditions with all or any. A condition can be specified with the following options:

        • fact: A property from the contract or a document. If a property from a document is to be used, “fact” must be “doc”. The property can then be accessed via "path": "$internalFieldName”.

        • path (optional): Can be used if the fact is an object and you want to access a property (see example configuration).

        • operator:

          • For text:

            • equal 

            • notEqual 

            • startsWith 

          • For numbers:

            • greaterThan 

            • lessThan 

            • greaterThanInclusive 

            • lessThanInclusive 

          • For arrays:

            • in: fact must be included in the value list.

            • notIn: fact must not be contained in the value list.

            • contains: The fact list must contain value.

            • doesNotContain: The fact list must not contain value.

  • showInPanel (optional): Use the values true or false to define whether the URL is opened in a side panel.

  • panelSize (optional): Width of the panel in pixels.

GroupButton 

  • icon: Name of the Fluent UI icon to be displayed. For a list of the available icons, please refer to https://react.fluentui.dev/?path=/docs/icons-catalog--page.

  • text: Button display text for each language. Create translations for all languages that are supported by the application. Enter the translations as values next to the corresponding language codes. Possible language codes: de, en, fr, it, nl, pt, es, pl.

  • subMenuButtons: A list of LinkButtons or GroupButtons.

  • showButtonIf: Same configuration as for LinkButton.

Example configuration 

[
    {
        "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"
                    }
                ]
            }
        ]
    }
]