Add JavaScript to Power Pages Entity List

Add JavaScript to Power Pages Entity List

Power Pages Entity Lists provide an easy way to display Dataverse records in a grid format. However, many business requirements require additional customization such as hiding columns, adding custom buttons, formatting data, applying validations, and controlling user interactions.

By adding JavaScript to Entity Lists, developers can significantly enhance portal functionality and create a more interactive user experience.

Why Add JavaScript to Entity Lists?

Common Business Scenario

Suppose an Entity List displays Project records. You want to hide internal fields, add a custom button, and highlight records based on status values.

Step 1: Open the Web Page

  1. Open Power Pages Design Studio.
  2. Select the page containing the Entity List.
  3. Edit the page content.
  4. Locate the Custom JavaScript section.

Step 2: Hide a Column 

$(document).ready(function () {

   $("th[data-attribute='new_internalid']")
   .hide();

   $("td[data-attribute='new_internalid']")
   .hide();

});

Step 3: Add Custom Button 

$(document).ready(function(){

   $(".entitylist")
   .before(
   ''
   + 'Export Records'
   + '');

});

Step 4: Handle Button Click 

$(document).on(
'click',
'#btnExport',
function(){

   alert(
   'Export Process Started');

});

Step 5: Apply Conditional Formatting 

$(".entity-grid tbody tr")
.each(function(){

   var status =
   $(this)
   .find("td:eq(4)")
   .text();

   if(status === "Completed")
   {
      $(this)
      .css(
      "background",
      "#d4edda");
   }

});
Important: Always test JavaScript customizations after portal updates because HTML structures may change between Power Pages releases.

Where to Add JavaScript?

Common Use Cases

Benefits

Key Takeaways