If you are working with Power Pages Pro Code Development, you might need to access the current logged user Contact ID for various purposes, such as personalizing the content, saving data using the WebAPI and relating to the current user.

In this blog post, I will show you how to do it via JavaScript in two different ways.

Liquid to help

To get the current logged user Contact ID via liquid we can to use the Liquid syntax {{user.id}}.

This will return the GUID of the Contact record that is associated with the current Power Pages user. Liquid code as you might be aware needs to be used in a WebTemplate, Content Snippet or Web Page code. So you would need to render the ID in an HTML element and retrieve this value later via JavaScript.

You can use this syntax anywhere in your Power Pages HTML code, and it will be replaced with the actual value when the page is rendered.

For example, you can use it to create a hidden input field that stores the Contact ID in a page, like this:

<input type="hidden" id="contactId" value="{{user.id}}" />

Then, you can access the value of this input field via vanilla JavaScript, like this:

var contactId = document.getElementById("contactId").value;

Or using jQuery:

var contactId = $("#contactId").val();

How to use it the Contact ID in WebAPI Calls?

Given a table where you have set up ‘Contact’ type table permissions, configured based on a field named ‘Portal Contact’ as below:

When you create items using the Power Pages Web API, you will need to assign a contact to records you create, so that you can retrieve those records later. You will be able to assign only the contact for the current user in that case (permissions will prevent assigning records to other users).

Sample JavaScript request to create a record associated to the current user (considering a field named ‘Portal User’ as the one you base the table permissions as in the screenshot above):

function AddApplication() {
  let dataObject = {
    "pnp_name": "Some value you want to add as name",
    "pnp_PortalUser@odata.bind": "/contacts(" + contactId + ")"
  };

  webapi.safeAjax({
    type: "POST",
    url: "/_api/pnp_applications",
    contentType: "application/json",
    data: JSON.stringify(dataObject),
    success: function (res, status, xhr) {
      var applicationId = xhr.getResponseHeader("entityid");
      alert(`Application saved with ID:${applicationId }`)
    },
    error: function (errorResponse) {
      console.log("failed")
      console.log(errorResponse);
      alert("Error Saving Application Data");      
    }
  });
}

You can use this sample code in a WebPage/WebFile/WebTemplate, as long as the WebAPI wrapper code is present in that page.

References

Liquid overview – Microsoft Learn

Web Templates – Microsoft Learn

Assign Table Permissions – Microsoft Learn

Set Table Permissions – Microsoft Learn