Dynamics Community Forum Thread Details

Hello CU20030939-0,

You've hit on a common point of frustration when trying to customize Power Pages forms beyond the standard Dataverse form rendering. The "Liquid error: Value cannot be null. Parameter name: source" error is a frequent indicator that you're attempting to access or manipulate data in a way that Power Pages' Liquid engine isn't expecting.

Understanding the Limitations:

Power Pages Form Rendering: While you can embed Liquid code and JavaScript within Power Pages, the core rendering of Dataverse forms is still largely controlled by the platform's internal mechanisms.
Built-in Form Behavior: Power Pages forms, by default, rely heavily on the metadata and configuration defined within the Dataverse table and its corresponding model-driven form. This means they are designed to work within the constraints of that structure.
Liquid Limitations: Liquid is primarily intended for templating and dynamic content display, not for completely replacing the form's data handling and submission logic.

Why You're Getting the Liquid Error:

Data Source Issues: The "Value cannot be null. Parameter name: source" error typically arises when Liquid is trying to access data from a source that doesn't exist or is null.
Incorrect Context: This often happens when you're trying to directly manipulate form fields or data without the necessary context provided by Power Pages' form rendering process.
Direct Field Access: Directly accessing Dataverse table fields within Liquid without using the proper form-related Liquid objects and methods can lead to this error.

Can You Create Custom Layout Forms Using HTML + Liquid + JavaScript?

Partial Customization: Yes, you can achieve a degree of customization using HTML, Liquid, and JavaScript. However, you cannot completely bypass the underlying form handling.
HTML for Layout: You can use HTML to create custom layouts and styles for your form elements.
Liquid for Dynamic Content: Liquid can be used to dynamically populate form fields with data or to conditionally display form elements.
JavaScript for Client-Side Logic: JavaScript can be used for client-side validation, interactivity, and some level of data manipulation.

How to Approach Custom Forms in Power Pages:

Use Entity Forms as a Foundation:
- It's generally recommended to start with the standard Entity Form component.
- This provides the necessary data context and handles the basic form submission logic

Enhance with Liquid:
- Use Liquid to customize the form's appearance and behavior.
- You can use Liquid to:
  - Pre-populate fields with data.
  - Conditionally display fields or sections.
  - Format field values.

Add JavaScript for Client-Side Functionality:
- Use JavaScript for client-side validation and interactivity.
- You can use JavaScript to:
  - Validate form input.
  - Dynamically show/hide form elements.
  - Perform calculations.

Avoid Direct Dataverse Field Manipulation in Liquid:
- Instead of directly accessing Dataverse table fields, use the form-related Liquid objects and methods provided by Power Pages.
- Refer to the Power Pages documentation for the correct Liquid syntax to work with forms.

Use Web API for Advanced Data Operations:
- For more complex data operations (e.g., retrieving related records, updating data), use the Power Pages Web API.
- This allows you to interact with Dataverse data from your JavaScript code.

Example Scenario (Partial Customization):

Custom Layout: Use HTML to create a custom layout for your form, including custom CSS for styling.

Dynamic Data: Use Liquid to pre-populate a field with the current user's name:
<input type="text" value="{{ user.fullname }}" />

Client-Side Validation: Use JavaScript to validate the form input before submission.

Important Considerations:

Security: Be mindful of security when using JavaScript to manipulate form data.
Performance: Optimize your Liquid and JavaScript code for performance.
Maintainability: Keep your code clean and well-documented.
Power Pages Documentation: Refer to the official Power Pages documentation for the latest information on Liquid and JavaScript usage.

In summary, while you can't completely replace the Power Pages form rendering with custom HTML + Liquid, you can achieve a significant level of customization by enhancing the standard Entity Form with Liquid and JavaScript. Focus on using Liquid for dynamic content and JavaScript for client-side logic, while relying on the Entity Form for core data handling.

If my answer was helpful, please click Like, and if it solved your problem, please mark it as verified to help other community members find more. If you have further questions, please feel free to contact me.

My response was crafted with AI assistance and tailored to provide detailed and actionable guidance for your Microsoft Dynamics 365 query.

Regards,

Daivat Vartak

Community site session details

Power Pages Portal - Custom Form

Helpful resources

News and Announcements

Quick Links

Responsible AI policies

Andrés Arias – Community Spotlight

Congratulations to the August Top 10 Community Leaders!

Leaderboard > Service | Customer Service, Contact Center, Field Service, Guides

Featured topics

Product updates