Access Table Data From Every Web Form With Power Pages

I recently ran into a situation with Power Pages where I needed a Dataverse/CE value accessible on several different Web Form Steps, but that value was not housed by a form control; it was for display information only. This is not possible all on its own, so some development must happen.

I pondered my options and decided on liquid, session storage, and JavaScript. This blog will discuss several possibilities in brief but will cover, in detail, my approach.

Skills Needed

  • CE form development
  • Portal Web Form (and Web Form Step) creation
  • Portal liquid
  • jQuery/JavaScript

Possibilities

Add Column to Every Tab

One option, although not a great one, is to add that column to every tab on the form in which the value is needed.

Screenshot showing adding a column to a tab in a form.

The column would be hidden.

Screenshot showing the Visibility on a column.

jQuery / JavaScript could be used to display the value and place it where you need it.

AJAX Call

Utilizing the Portal Web API functionality is an option. You can discover how to do this here.

In my opinion, this is the second best option, but I want to go simpler, so let’s keep exploring.

Liquid on Every Web Form Step

Another idea is to tap into liquid code and expose the needed value on every Web Form Step. This is actually not an option, due to the fact that liquid can only be used in Web Templates or the Page Copy of a Web Page, neither of which works with Web Forms.

Liquid, SessionStorage, and JavaScript

Eliminating the options above leaves us with our best option. We can employ elements of the principles mentioned to create a succinct solution that can be used on every Web Form Step.

Web Page of Web Form

Every Web Form, if being used, is associated to a Web Page. Below, we can see that the Renewal – DPC – Edit Web Form is associated to the Renewal – DPC – Edit Web Page.

Screenshot of a web form.

It is the Web Page that has the URL to which portal users navigate.

https://[your website here].powerappsportals.com/dpc-renewals/dpc-renewal-edit/?id=88fff062-f59d-ff11-a569-999d3af4ff07

In the case of the URL above, dpc-renewal-edit is the URL of the Web Page that houses the Web Form and all the Web Form Steps. So, whether I am on step one or step ten, the base URL ([your website here].powerappsportals.com/dpc-renewals/dpc-renewal-edit) will be the same. This is why we can break into this page to retrieve the data that we need for all steps, if applicable.

As alluded to before, the Web Page (Content Page form) with the Page Copy control supports liquid code. It is here we can retrieve the table, tied to the Web Form, using liquid as seen here.

Screenshot in a Web Page showing the HTML.
 

{% assign renewal_id = request.params["id"] %}

 

{% if renewal_id != '' %}

  {% assign renewal = entities.ebs_renewal[renewal_id] %}

{% endif %}

When the Web Page is loaded, the URL contains the ID of the record:

https://[your website url here].powerappsportals.com/dpc-renewals/dpc-renewal-edit/?id=88fff062-f59d-ff11-a569-999d3af4ff07
{% assign renewal_id = request.params[“id”] %}

This liquid takes the ID in the URL and assigns it to a liquid variable.

{% assign renewal = entities.ebs_renewal[renewal_id] %}

Then, liquid retrieves the record object and places that into a variable. This record object will then be available in the code below.

Further down in the Web Page Page Copy, we add JavaScript to store the value retrieved by liquid into a SessionStorage variable.



<script type="text/javascript">

  $( document ).ready(function() {

    console.log( "Begin DPC-Renewal-Edit");

 

    try{

      sessionStorage.setItem("TotalRenewalFees", "{{renewal.ebs_total_renewal_fees}}");

    }

    catch(e){

      console.error("Renewal Confirmation ERROR: " + e);

    }

  });

</script>

sessionStorage.setItem(“TotalRenewalFees”, “{{renewal.ebs_total_renewal_fees}}”);

Notice we need to place the liquid in double quotes; if we do not, it will produce errors. Now, using SessionStorage, we have access to this value on any and every step of the Web Form. We have called it once and may use it many times throughout.

Web Form Step JS

Now that the value is in SessionStorage, we can navigate to any Web Form Step that needs to display it and add some jQuery/ JavaScript.

Remember, the Web Form Step is associated to the Web Form, which is associated to the Web Page:

Screenshot in the Web Form Step window.

Navigate to the desired Web Form Step and then click on the Form Options tab. Scroll down until you see the Custom JavaScript section, and copy and paste the code below.

Screenshot in the Web Form Step window under the Form Options section.


$(document).ready(function () {

  console.log("Begin Directors and Officers...");

  var total_renewal_fees = sessionStorage.getItem("TotalRenewalFees");

  console.info("total_renewal_fees: " + total_renewal_fees);

 

  var new_p = "<p>Your total fees amount to " + total_renewal_fees + "</p>";

  $(new_p).insertAfter("h2.tab-title");

});

var total_renewal_fees = sessionStorage.getItem(“TotalRenewalFees”);

Pull the value from SessionStorage and place it into a JS variable.

var new_p = “<p>Your total fees amount to ” + total_renewal_fees + “</p>”;

Create a new HTML element to store your information.

$(new_p).insertAfter(“h2.tab-title”);

Add the new element to the Web Form Step at the desired location.

You will need to find an HTML element (h2.tab-title) that already exists on the rendering of the Web Form Step. In our case, we want to display this information below the tab title and above the form fields.

Screenshot point to the to the area in a Web For STep below the tab title and above the form fields.

Using the web browser development tools, we can find the HTML for that element:

Screenshot of HTML.

Using jQuery, we can place the SessionStorage value into the HTML element.

Conclusion

When navigating to the Portal and progressing through the Web Form and steps, we can see, through the Developer tools, that the value is accessible.

Screenshot showing the Developer Tools in the Portal, the value that is accessible.

Using the code above, we can observe the results of the total renewal fees being added to an HTML element after the tab title and before the form fields.

Screenshot showing the HTML element being added to the form.

To learn more about how to leverage Power Pages and the entire Power Platform for your business needs, please contact us.

Are You Receiving Our Newsletters?

Subscribe to receive our newsletters with the latest updates all in one place! Get important product information, event recaps, blog articles, and more.

Subscribe

Quarterly Newsletter Straight to Your Inbox

Subscribe