Dynamically Switching Between Insert and Edit Forms in Power Pages

Introduction

Sometimes, you may want to establish a one-to-one relationship with a parent table in Power Pages. A common scenario for this is preventing a logged-in user from registering multiple data entries. You could achieve this by displaying an insert form if no data exists, and an edit form if data already exists. However, since this cannot be set up using no-code, it must be implemented through customization.

Execution Steps

We will create a table called "Contact Profile," which includes a self-introduction column and is linked one-to-one to a logged-in user (Contact). I will explain how to dynamically switch between an insert form and an edit form so that the logged-in user can fill in their self-introduction.

Dataverse

Table

Create the Contact Profile table, which will serve as the child table for the Contact.

Add the Self-Introduction column.

Add the Contact column. This will establish the relationship with the Contact table.

Form

Add the forms to be displayed in Power Pages.

Power Pages

Insert Form

Create the insert form.

Configure it to associate with the logged-in user upon saving.

Edit Form

Create the edit form. It should be set up to receive an id as a query string.

Table Permissions

Add access permissions for Contact Profile. Set the Access Type to Contact Access. This ensures that users can only reference their own records.

Page

Select an appropriate page (in this case, we will edit the Home page) and click Edit Code. Open the HTML file in Visual Studio Code.

{% assign id = request.params["id"] %}
{% if id.size > 0 %}
  {% if id == "00000000-0000-0000-0000-000000000000" %}
    <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
      <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px;">
          {% entityform name: 'Contact Profile Insert Form' %}
        </div>
      </div>
    </div>
  {% else %}
    <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
      <div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
        <div class="col-md-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 300px;">
          {% entityform name: 'Contact Profile Edit Form' %}
        </div>
      </div>
    </div>
  {% endif %}
{% else %}
  {% fetchxml query %}
    <fetch mapping="logical">
      <entity name="cr818_contactprofile">
        <attribute name="cr818_contactprofileid"></attribute>
        <link-entity name="contact" to="cr818_contact">
          <filter type="and">
            <condition attribute="contactid" operator="eq" value="{{ user.id }}"></condition>
          </filter>
        </link-entity>
      </entity>
    </fetch>
  {% endfetchxml %}
  {% if query.results.entities.size > 0 %}
    {% assign result = query.results.entities[0] %}
      <script type="text/javascript">
        window.location = window.location + "?id={{ result.cr818_contactprofileid }}";
      </script>
  {% else %}
      <script type="text/javascript">
        window.location = window.location + "?id=00000000-0000-0000-0000-000000000000";
      </script>
  {% endif %}
{% endif %}

Here is what this code does:

• If there is no id parameter, it uses FetchXML to retrieve the record associated with the current logged-in user. If a record exists, it redirects using that ID; if not, it uses 00000000-0000-0000-0000-000000000000.
• If an id parameter is present, it displays the insert form if the ID is 00000000-0000-0000-0000-000000000000, otherwise it displays the edit form.

Execution Results

When accessed without existing data, it redirects to id=00000000-0000-0000-0000-000000000000 and the insert form is displayed.

Saving in this state and reloading will redirect to id={{contact-profile-id}}, enabling editing.

Conclusion

It would be ideal if the Liquid template entityform could receive an ID directly, but since the only way to pass it is via a query string, this implementation was used. Of course, there are other methods, such as avoiding entityform or using Web APIs instead of Liquid templates. Please choose the most appropriate method based on your development skills and specific requirements.