Overview of SharePoint Framework Extensions
SharePoint Framework (SPFx) extensions are client-side components that run inside the context of a SharePoint page. SharePoint Framework (SPFx) Extensions enable you to extend the SharePoint user experience within modern pages and document libraries, while using the familiar SPFx tools and libraries for client-side development.
Specifically, the SPFx includes three extension types:
- Application Customizers: Add scripts to a page, access well-known HTML element placeholders, and extend them with custom renderings
- Field Customizers: Provides modified views of data for fields within a list
- Command Sets: Extends the SharePoint command surfaces to add new actions, and provides client-site code that you can use to implement behaviors
You can build extensions alongside common scripting frameworks such as Angular and React, or plain JavaScript projects.
To integrate Dialogflow messenger with SharePoint, we can use SharePoint application customizers.
Building SharePoint Framework Extension (SPFx)
Set up your SharePoint Framework Development Environment
- Install Node.js (recommended version is LTSv14)
- Install gulp, yeoman, yeoman SharePoint generator
npm install gulp-cli yo @microsoft/generator-sharepoint –global
NOTE: Use Powershell instead of CMD for running all the commands
Creating SPFx extension which integrates Dialogflow messenger
- Create a new directory (say dialogflow-app-ext)
- Go to this new directory and create a new DialogflowAppCustomizer extension by running the SharePoint Framework Yeoman generator.
yo @microsoft/sharepoint - On prompt, enter the following values (select the default option for all prompts omitted below):
- What is your solution name? dialogflow-app-ext
- Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
- Which type of client-side component to create? Extension
- Next choose Application Customizer
- What is your Application Customizer name? DialogflowMessenger
- What is your Application Customizer description? Dialogflow messenger app customizer
At this point, yeoman installs the required dependencies and scaffolds the solution files along with the DialogflowAppExtension extension.
- Open ./src/extensions/dialogflowMsgrAppCust/DialogflowMsgrAppCustApplicationCustomizer.ts
The logic for your application customizer is configured in the onInit() method, which is called when the client-side extension is first activated on the page.Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online. After you get the placeholder object, you’ll have full control over what is presented to the end user.
Update the onInit() method as follows:
@override
public onInit(): Promise<void> {
Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);
// Wait for the placeholders to be created (or handle them being changed) and then render.
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
return this._userLoaded;
}
Create a new _renderPlaceHolders() private method with the following code:
private _renderPlaceHolders(): void {
if (!this._bottomPlaceholder) {
this._bottomPlaceholder = this.context .placeholderProvider.
tryCreateContent (PlaceholderName.Bottom,
{onDispose:this._onDispose}) ;
if (!this._bottomPlaceholder) {
console.error(“The expected placeholder (Bottom) was not found.”);
return;
}
if (this._bottomPlaceholder.domElement) {
// Render only after we’ve gotten the current user’s UPN
this. userLoaded.then((upnString) => {
}
}
}
The Dialogflow messenger logic will be handled in this method (_renderPlaceHolders()). The Dialogflow gives us the following HTML code which can be used in this method.
<script src=”https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1″></script>
<df-messenger
df-cx=”true”
chat-title=”Chatbot”
agent-id=”<AGENT_ID>”
language-code=”en”></df-messenger>
The above Dialogflow messenger code should be added to placeholders.
this._bottomPlaceholder.domElement.innerHTML = `
<style>
df-messenger {
–df-messenger-chat-background-color: #ededed;
–df-messenger-send-icon: black;
–df-messenger-button-titlebar-color:white;
–df-messenger-button-titlebar-font-color: black;
–df-messenger-user-message: #E1F5E4;
}
</style>
<df-messenger
df-cx=”true”
chat-title=”Chatbot”
agent-id=”<AGENT_ID>”
language-code=”en”
intent=”custom-event”
user-id=”${this.userDisplayName}”
></df-messenger>`
The scripts can’t be directly added to the innerHTML property. Instead, add the script to the placeholder as follows:
var gdfScript = document.createElement(“script”);
gdfScript.src =
“https://storage.googleapis.com/*******/%20df-cx-messenger-scripts/df_bootstrap.js”;
this._bottomPlaceholder.domElement.appendChild(gdfScript);
For customizing the chatbot UI, the provided JavaScript (https://www.gstatic.com/dialogflow-console/fast/messenger-cx/bootstrap.js?v=1) can be modified. Place the modified script at a public location like a Google Cloud Storage bucket and give the path here.
We can also add additional scripts to enhance the functionality of the Dialogflow messenger.
The messenger can also be customized by adding inline scripts to this placeholder as follows:
var customScript = document.createElement(“script”);
customScript.type = “text/javascript”;
customScript.text = `
window.addEventListener(‘dfMessengerLoaded’, function(event) {
const dfMessenger = document.querySelector(‘df-messenger’);
$r1 = document.querySelector(“df-messenger”);
$r1 = document.querySelector(“df-messenger”);
$r2 = $r1.shadowRoot.querySelector(“#closeSvg”);
$r2.style.fill=”forestgreen”;
});
`
this._bottomPlaceholder.domElement.appendChild(customScript);
The above code snippet is for changing the color of the close “X” icon.
You can make use of other event listeners to implement the required functionalities.
- Open ./config/serve.json and change the “pageUrl” to the URL of the SharePoint site where this app extension should be deployed
- Now run the following commands from the root directory
gulp bundle –ship
gulp package-solution –ship
After running the above commands, a package file (.sppkg) will be created at ./sharepoint/solution/dialogflow-app-ext.sppkg
Deploying Dialogflow messenger Sharepoint extension
- Go to App catalog page of SharePoint site to which this extension should be deployed,
For example,
https://xyz.sharepoint.com/sites/SITE_NAME/AppCatalog/Forms/AllItems.aspx
- Click on “Upload” and then upload the package file which was previously created. Then click “Deploy” in the next window that appears.
- Now traverse to the SharePoint site and refresh it to see the Dialogflow messenger.
That’s it! You’re ready to integrate Dialogflow messenger into your SharePoint website. Feel free to contact SpringML for more information or questions regarding integrating Dialogflow messenger into your SharePoint website.
