pnp/sp-dev-fx-extensions

react-application-pva-bot

Closed this issue · 5 comments

johanvandy commented

Sample

https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-application-pva-bot

Author(s)

@bernierh @DmitryVorobyov

What happened?

I am getting a Unable to connect message. Please refer to https://github.com/pnp/sp-dev-fx-extensions/issues/396

I cannot find a placeholder for the the botid or tenantid in the serve.json file. I did find it in the elements.xml file in the sharepoint\assets folder, and I replaced the placeholders with my values as can be seen below. My values substituted with XXXXXX for security purposes

ClientSideComponentProperties="{"botId": "XXXXXX","botFriendlyName": "Contoso Bot","buttonLabel": "Chat with Contoso Bot","tenantId": "XXXXXX","botAvatarImage": "https://your-bot-avatar-image-url","botAvatarInitials": "CB","greet": false}"

When testing the bot with gulp serve, several errors are produced after the page has loaded in the browser. The one error that stands out is as below:
ChatbotDialog.tsx:86 GET https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=undefined&tenantId=undefined 404 (Not Found)

As can be seen from this error, the values for botid and tenantid is undefind even though I have supplied it in the elements.xml file.

I am sure there is nothing wrong with the bot created as it is a newly created bot without any changes made after the initial creation of the bot.

When clicking on Start chat with Chatbot button, the same error is reproduced.

Any assistance will be greatly appreciated

Steps to reproduce

  1. Clone the code
  2. Run npm install
  3. Replace pageURL in serve.json file with your own URL
  4. Replace YOUR-BOT-GUID and YOUR-TENANT-GUID in the element.xml file
  5. Run gulp serve
  6. The page loads and the button for the bot is displayed\available. Click on the button.
  7. An error message is displayed, Unable to connect

ChatBotErr

Expected behavior

When clicking on the Start chat with Chatbot button to connect and test the bot.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

  • Internet Explorer
  • Microsoft Edge
  • Google Chrome
  • FireFox
  • Safari
  • mobile (iOS/iPadOS)
  • mobile (Android)
  • not applicable
  • other (enter in the "Additional environment details" area below)

SPFx version

1.12.1

Node.js version

v10.20.1

Additional environment details

+-- @microsoft/generator-sharepoint@1.12.1
+-- @pnp/cli-microsoft365@3.7.0
+-- gulp@4.0.2
`-- yo@4.2.0

Deleted user commented

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

hugoabernier commented

@johanvandy, please try the following steps:

  1. Run gulp serve --nobrowser
  2. Browse to a page on your tenant
  3. Append this to the query string, making sure to update the botId and tenantId in the URL::
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"361d8846-81a4-490b-8cc9-ff67d211faaa":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"botId":"YOUR-BOT-GUID", "tenantId": "YOUR-TENANT-ID"}}}

Note, you can find the debug URL on every sample by visiting the Debug URL for Testing heading in every README.md. Here's the one for this sample.

The JSON parameters you pass in the serve.json should be proper JSON -- not XML encoded. For a list of the possible settings, take a look at the instructions to deploy to all site collections in the README.md, which should get you

Let us know if you run into further issues.

johanvandy commented

@hugoabernier

I have tried your suggestion and now I am getting the below error. The test url is as follows (XXXXX for security):
https://XXXXX.sharepoint.com/sites/IntranetQA/SitePages/Chatbot-Test.aspx?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js&customActions={"361d8846-81a4-490b-8cc9-ff67d211faaa":{"location":"ClientSideExtension.ApplicationCustomizer","properties":{"botId":"XXXXX", "tenantId": "XXXXX"}}}

I do get the Allow debug script modal popup, but no button is rendered for the bot. A copy of my serve.json attached below.
serve.json.txt

image

Deleted user commented

Closing issue as "answered". If you encounter similar issue(s), please open up a NEW issue. Thank you.

johanvandy commented

@hugoabernier

It seems that the extension needs to be added to the appCatalogue first before it actually works. Without it being added to the appCatalogue, I keep getting the errors as mentioned in previous message.

Also important is to make sure that the bot has been published.