spodoc-button

This is a sample to show how to create SPFx extension button to connect to a Azure Function. The button will be shown at document libraries.

the button is also able to process Azure Function return 202 accepted. the logic will look at the statusQueryGetUri from 202 status

{
    "id": "f5f0e03153b547b1bb04b1015d232957",
    "statusQueryGetUri": "[url]",
    "sendEventPostUri": "[url]",
    "terminatePostUri": "[url]",
    "rewindPostUri": "[url]",
    "purgeHistoryDeleteUri": "[url]"
}

If statusQueryGetUri call is able to return the customStatus showed the following json, the progress and message will be shown.

{
    "name": "MainFunction",
    "instanceId": "f5f0e03153b547b1bb0",
    "runtimeStatus": "Running",
    "input": null,
    "customStatus": {
        "Process": 60,
        "Message": "Task 6 is processing"
    },
    "output": null,
    "createdTime": "2019-11-04T06:04:56Z",
    "lastUpdatedTime": "2019-11-04T06:05:15Z"
}

When a Azure Function is called, the following data will be POST to the endpoint:

{
    "siteUrl": "[site url]",
    "listTitle": "[list title]",
    "listId":"[list id]",
    "currentFolder": "[current folder in list/lib]"
}

Instruction

• Create a "Settings" list
• Add single text column and name it as "Value".
• Add a list item:
  • Title: COMMAND_1
  • Value: setting JSON of buttone.
    • title: the Button title.
    • refreshPage: whether or not refresh the page after the call.
    • displayLIsts: a list of list/library title which you want to show this button.
    • apiUrl: the web api URL you want to trigger.
    • iconImage: the Button icon image base64 or url

{
    "title": "[button title]",
    "refreshPage": true,
    "displayLists": [
        "[document/list title]"
    ],
    "apiUrl": "[web api url]",
    "iconImage": "[icon image base64 or image url]"
}

Building the code

• Please follow Set up your SharePoint Framework development environment to setup your development environment.
• Connect to GitHub to clone the project
• Run the following command to start a local debugger:

npm install
gulp server

• Run the following command to create a package:

gulp bundle --ship
gulp package-solution --ship