Power Pages with Gen 2 questionnaires

From Resco's Wiki
Jump to navigation Jump to search
Warning Work in progress! We are in the process of updating the information on this page. Subject to change.

Gen 2 questionnaires can be played on Power Pages. Compared to legacy integration, the second-generation player operates as a lightweight, native component with minimal background processes and a simplified data model. To get you started faster, we’ve included a preconfigured demo page that lets you deploy a working example almost instantly.

Demo page

We have prepared a sample page that you can add to your organization. Use it to quickly test or showcase questionnaires on Power Pages.

  1. Start the Resco Inspections app.
  2. On the Get Started page, scroll down to the section about Power Pages and download the solution file.
    download the sample Power Pages solution from the Resco Inspections model driven app
  3. Go to make.powerapps.com and import the solution. Wait for installation, then publish all customizations.
  4. Go to make.powerpages.microsoft.com and make sure you are in the same environment.
  5. Go to the Inactive sites tab and Reactivate the rescoQuestionnaire site.
    Resco-questionnaire-inactive-site
  6. Find the demo among your active sites. It contains the questionnaire player component on the home page and has the required tables and Web API permissions set.

To display an actual questionnaire:

  1. Open the source code in Visual Studio Code.
  2. Find <resco-questionnaire> component in the Home page.
  3. Instead of the placeholder, enter the ID of a questionnaire/answer that exists in your environment.
    enter a valid questionnaire id
  4. Save, Sync, and Preview. Sometimes, it might be necessary to fully reload the page to bypass the browser cache.
Warning The demo page uses benevolent table permissions and content security policy to simplify testing. For production use, review and adjust the settings.

Power Pages advanced

The previous section explains how to quickly import and deploy a sample Power Page with questionnaires. If you want to build a Power Page from scratch, here are the details. We cover table permissions, web API permissions, and the procedure for adding questionnaires to a page.

Set up table permissions

Add the necessary permissions for the following tables:

  • resco_questionnaire
  • resco_questionnaireanswer
  • annotation
  • systemuser
  • webresource
  • organization – Read
  • Any table accessible from your questionnaires (e.g., account, contact…)

You can decide what kind of access you want to grant users. Your web can be accessed by anonymous users or authenticated users. The access type might be global or parent, account, or contact. You can learn more about the security model of Power Pages in the official Microsoft documentation. In this document, we describe how to grant anonymous users access to the mentioned tables.

While editing your site, go to Security > Table permissions. For each table, repeat the following procedure:

  1. Click +New.
  2. Enter the Name of your permission, Website, and the Table Name.
  3. Set Access Type to "Global".
  4. Check the required privileges, for example, Read.
  5. Click Add roles and check role(s) for which the permission is created. In our case, it is Anonymous Users.
  6. Save all changes.

Set up web API access

Questionnaire Player uses the Microsoft Web API service to communicate with the underlying Dataverse organization. You must set the Web API access to the same tables as in the previous step.

  1. While editing your site, click the ellipsis button in the left pane (just under Set Up) and select Power Pages Management.
  2. Select Website > Site Settings from the menu.
  3. For each table, create two new site settings:
    • Enable the web API for this table.
    • Set up fields that should be available via web API (or use asterisk for all).
    • For the organization table, add more restricted web API permissions:
      • WebApi/organization/enabled Value: true
      • WebApi/organization/fields Value: organizationid

Inspections on Power Platform: Set web API access in site settings

Content security policy

If you want to use questionnaires with qp-bridge on Power Pages, you need to enable inline scripts in your page's content security policy settings.

content security policy - script source

Adding the player to Power Pages

  1. Include an external JavaScript in your page:
    <script type="text/javascript" src="/_webresource/resco_questionnairePlayer/WebComponent/rescoQuestionnairePowerPageComponent.js"></script>
  2. Use the web component in your page:
    <resco-questionnaire id="q1" questionnaire-id="3ca3a54d-f2b3-f011-bbd3-7ced8d769a67" regarding='{"entityName":"account","name":"test","id":"16b373ee-b0af-f011-bbd3-7c1e52365f30"}' user-id={{user.id}} />
<resco-questionnaire> attributes explained
  • id is the unique identifier of the HTML element
  • questionnaire-id is the GUID of the questionnaire (template or answer) to display
  • regarding: if you supply this optional attribute, it fills the fields regardingIdName, regardingId and regardingIdLabel on questionnaire answer
  • user-id: optional attribute, it can be initialized in Power Pages using Liquid user-id={{user.id}} if user is logged