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 and document level.

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:

LinkButton: This button, when clicked, opens a new tab with the specified link.
GroupButton: This button opens another menu. This menu can contain other buttons of both types.

LinkButton:

link
- ${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 - either plain text or an object in which language-specific translations can be included.
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.
    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 parameter): true/false. If the parameter is set to true, the URL will be opened in a page panel.
panelSize (optional parameter): Width of the panel in pixels.

GroupButton

icon: Name of the Fluent UI icon to be displayed.
text: Button display text - either plain text or an object in which language-specific translations can be included.
subMenuButtons: An array 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:

LinkButton: This button, when clicked, opens a new tab with the specified link.
GroupButton: This button opens another menu. This menu can contain other buttons of both types.

LinkButton:

link
- ${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 - either plain text or an object in which language-specific translations can be included.
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 parameter): true/false. If the parameter is set to true, the URL will be opened in a page panel.
panelSize (optional parameter): Width of the panel in pixels.

GroupButton

icon: Name of the Fluent UI icon to be displayed.
text: Button display text - either plain text or an object in which language-specific translations can be included.
subMenuButtons: An array 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"
                    }
                ]
            }
        ]
    }
]

Creating Power BI reports

Working with the configuration files