PowerApps Portal Security Part 3: Locking Forms after Submission

Overview

Often, I am asked questions such as “How can I have one list of records that navigate to two different web pages?”, “How can I give users a receipt of their submission?”, or “How can I prevent a user from submitting the information more than once?” I find that all of these questions are best solved with the same trick I’ve been using since 2017: proper record naming conventions and a little bit of Liquid code. With this, we can develop a single web page and template to handle multiple scenarios.

If we were to build two different Web Pages – that is, two different URLs – then what is to stop someone from maliciously changing from one to the other? As an example, if you have https://contoso.powerappsportals.com/lead/edit/?id=123456 before submission and https://contoso.powerappsportals.com/lead/read/?id=123456 after, with only the fact that the record is in two different views to separate the functionality, then changing the URL of a “read” record to the “edit” version breaks your security.

There are many additional use cases for this method, including showing different forms based on the target record or the user’s settings, hiding Draft records from Portal users if they somehow get the ID, having field-based security that extends beyond what Entity Permissions can do, and more.

The end result is a Read-Only page after submission, which allows for a convenient printer-friendly receipt. You can also slightly modify the Read-Only form to show more or less information, as needed. Additionally, you can have processes that check the pre-update to see if the record has previously been submitted – for those times when a user abuses the Back button – in order to prevent multiple submissions.

An Example Implementation

Let’s say that you have a Portal to accept Proposals from partners. For the sake of simplicity, you want the users to create the Proposals as a Draft and then submit them to become Read-Only.

First, set up your entity and a new system form, as well as Entity Permissions and Web Roles. You can also optionally load up any default data you want to test against. Next, we need to set up the portal components.

Proposal Entity

Create the entity of your choice and add a field that you want to use to indicate a submission. This can be a DateTime, an Option Set, a Two Option or the like. For the example we are building today, I have simply added the following two values to the Status Reason field: Draft (1), Submitted (108620000). Draft is the Default Value.

Add these fields to your system form. I typically create a new form, named something like “Portal Form”, to keep Portal functionality isolated.

Templates

Let’s save the actual Template implementation for last. Start by creating a blank Web Template titled “Proposal”, and a Page Template titled “Proposal Details” that points to this Web Template.

Web Pages

We will want to use two web pages for this: one for the list, and one for the record. I typically make the record a Child Page of the list, but there is no requirement to follow this practice. To start, leave the Entity Form, Web Form and Entity List fields blank. For the Proposals Web Page, set the Page Template to Full Page. For the Proposal Web Page, set it to our newly created Proposal Details Page Template.

Entity Forms

While this approach will also work with Web Forms, Entity Forms are my preferred solution the large majority of the time. We want to create three nearly identical Entity Forms for the sake of this example.

1. Proposal

This will be our Edit form, using the Query String “id” as our key.

Next, we want to set up the On Success Settings. For these settings, we want to redirect to the Proposal Web Page while appending the record ID as “id” and a custom query string of “success=true” so that we can differentiate a submission from a standard page load.

Lastly, we want to set up our Entity Form Metadata. This is how we will indicate a Portal submission, as well as control the field to use as a switch in our form types. For our sample, we are setting a custom Date field (“Date of Submission”) to Today’s Date and changing the Status Reason to the value for “Submitted.”

2. Proposal – Read

This will be the Entity Form we show when the record is locked. Use the same initial settings as the first Entity Form, but with the Mode set to ReadOnly. We do not need any On Success Settings or Entity Form Metadata for this form in this example.

3. Proposal – Create

This is completely optional, depending on your actual criteria, but we will create it for the sake of the example. This form will be used when either the URL does not contain an ID, or the ID does not point to a record the user has access to.

Like the “Proposal – Read” Entity Form, we want to use the same base settings but change the Mode to Insert. We still do not need Entity Form Metadata, but we should create the same On Success Settings as the original Entity Form. Optionally, you can change the label of the Submit button to “Save”.

Entity List

Now we need to create an Entity List to show the existing records and to provide a location for a Create button for new ones. I created a basic System View that includes the Name, Date of Submission and Status Reason fields.

For the configuration, select the View and set both the Web Page for Details and Web Page for Create to the Proposal page. For the detail setting, use “id” as the ID Query String Parameter Name.

Web Pages (Part 2)

Now we need to go back and set up the form and list on our Web Pages. Set the Proposal Web Page to point at the Proposal Entity Form, and set the Proposals Web Page to point at the Proposals Entity List.

You may have noticed that there is now a cyclic relationship between the Entity Form and Web Page. When you navigate to the Proposal Web Page, it will show the Entity Form, and submitting this form will redirect you to the same Web Page. We do this instead of showing a success message on the Entity Form because data is not retrieved with the success message, and we need that data to identify that a change has occurred.

Web Template

Finally, we need to set up the Web Template. This template should be a good starting point for future implementations. Developers can easily remove unneeded functionality, such as the Create or messaging logic, and add anything that may be necessary to complete their requirements. For example, the logic can be generalized so that the entity name and/or field to check for previous submission are parameters used in an include tag.

{%- extends 'Layout 1 Column' -%}

{%- block main -%}
  {%- include 'Page Copy' -%}
  {%- if page.adx_entityform -%}
    {%- assign formName = page.adx_entityform.name -%}
    {%- if params.id -%}
      {%- assign proposal = entities.jb_proposal[params.id] -%}
      {%- if proposal -%}
        {%- if proposal.statuscode.value == 108620000 -%}
          {%- assign formName = formName | append: ' - Read' -%}
          {%- if params.submit == 'true' -%}
            {%- assign messageClass = "success alert-success" -%}
            {%- assign messageSnippet = "Custom/RecordSubmitted" -%}
            {%- assign messageDefault = "Your Proposal has been submitted!" -%}
          {%- endif -%}
        {%- elsif params.submit == 'true' -%}
          {%- assign messageClass = "success alert-success" -%}
          {%- assign messageSnippet = "Custom/RecordSaved" -%}
          {%- assign messageDefault = "Your Proposal has been saved! You can submit at any time." -%}
        {%- endif -%}
      {%- else -%}
        {%- assign formName = formName | append: ' - Create' -%}
        {%- assign messageClass = "error alert-danger" -%}
        {%- assign messageSnippet = "Custom/MissingRecord" -%}
        {%- assign messageDefault = "The proposal you are looking for couldn't be found. You can create a new one here." -%}
      {%- endif -%}
    {%- else -%}
      {%- assign formName = formName | append: ' - Create' -%}
    {%- endif -%}
    {%- if messageClass -%}
      <div id="CustomMessagePanel" class="message alert {{ messageClass | default: 'error alert-danger' }}">
        <span id="CustomMessageLabel">{{ snippets[messageSnippet] | default: messageDefault | default: "An unexpected error has been encountered." }}</span>
      </div>
    {%- endif -%}
    {%- entityform name: formName -%}
  {%- endif -%}
{%- endblock -%}

End Result

1. Create a New Proposal

2. Submit a Proposal

3. Edit Draft Proposals

4. View a Submitted Proposal