Is there anyway we can code the forms for more customizability in the UI?

(1) Share

Report

Posted on by KevinGador

685 Super User 2025 Season 2

I want to make a more complex form and validations for the form however I am not able to find any ways to do this using the forms method

in the visual code this is what is entered

{% entityform name: 'Create a report' %}

i can see some is basic-forms but it doesnt contain anything so im not sure

also additional question, can a submit button insert a row in a dataverse table?

Categories:

General

I have the same question (0)

All responses (8)

Answers (0)

Suggested answer

DP_Prabh 21 on at

Like (0)

Report
Is there anyway we can code the forms for more customizability in the UI?

For form validation in Power Pages, there are a couple of approaches depending on your requirements:

✅ Basic Form Validation:
If you're using a Basic Form, you can:

Preview the page, inspect the form elements using browser Dev Tools, and identify the field id or class.

Then, apply JavaScript validation directly to those fields on that specific page.

Alternatively, you can add custom JS directly in the form's Advanced Settings in the Power Pages designer.

This allows for light customization and field-level validation.

✅ Advanced Custom Form Validation:
If you require more complex validation and also want to handle the form submission manually, you can:

Create a custom form using HTML/CSS.

Use JavaScript and AJAX to validate the inputs and submit the data via the Power Pages Web API.

This gives you full control over the UI and logic.

Here are some helpful resources:

Add custom JavaScript to Power Pages

JavaScript validation with Basic Forms – Rishan Digital

Build custom HTML forms – ReadyXRM

This approach works well. If you run into any issues, feel free to tag me — happy to help!

Thanks.

Was this reply helpful? Yes No
Michael E. Gernaey 47,125 Super User 2025 Season 2 on at

Like (0)

Report

Is there anyway we can code the forms for more customizability in the UI?

Hi @KevinGador

You also asked

also additional question, can a submit button insert a row in a dataverse table?

Yes you can have a customized button that can add records into Dataverse, delete or update them etc.

Was this reply helpful? Yes No
Suggested answer

Fubar 8,058 Super User 2025 Season 2 on at

Like (1)

Report
Is there anyway we can code the forms for more customizability in the UI?

Each field on the form will have an id that is set to the logical schema name of the field in question (i.e. the lowercase schema name from dataverse) and using that id you can retrieve the value of the fields using JQuery/JavaScript.

Somethings can get a bit more tricky as the object/control that you wish to deal with may not have an id set for it, in which case you may need to find the nearest td (or other tag or class) to the id - and somethings such as Lookup fields and the the date control can be more challenging depending on what you need to do.

Oliver also has a web site that has various code snippets

https://oliverrodrigues365.com/2020/07/19/power-apps-portals-javascript-tip-01-hide-show-elements/

Applying CSS, depends on what you need to do, and there may be different approaches

Add your own CSS file to the designer (often you will need to use the !important keyword to override the existing CSS)

Use form/Step Metadata records to add a CSS class to a specific field

Add CSS classes against the Power Pages form definition or Web Page

Use JQuery/JavaScript to add/remove inline CSS

The Power Pages Management App and the Code designer have places to add your own JS and CSS against the Forms or Web Page.

https://learn.microsoft.com/en-us/power-pages/configure/manage-css

https://learn.microsoft.com/en-us/power-pages/getting-started/tutorial-add-custom-style

Was this reply helpful? Yes No
KevinGador 685 Super User 2025 Season 2 on at

Like (0)

Report

Is there anyway we can code the forms for more customizability in the UI?

found some tutorials from this guy as well that is very helpful

Power Pages Tip #244 - Conditional Hide/Show on Forms - Engineered Code

Was this reply helpful? Yes No
Suggested answer

Michael E. Gernaey 47,125 Super User 2025 Season 2 on at

Like (1)

Report

Is there anyway we can code the forms for more customizability in the UI?

Hi @KevinGador

There is actually a lot of training, some specific links to your issue have been provided. I am providing an overall training availability including free live training and step by step training.

Browse all training - Training | Microsoft Learn

That link will take you to a filtered list of tons of learnings on Power Pages.

Also you can get a free training session here, scroll down and select Power Pages in a Day

Power Platform In a Day Workshops | Microsoft Power Platform

My goal is to help you learn since you are having issues, versus just trying to help you answer this one question.

Cheers

If this helps you please Mark as such and maybe a like.

Was this reply helpful? Yes No
KevinGador 685 Super User 2025 Season 2 on at

Like (0)

Report
Is there anyway we can code the forms for more customizability in the UI?

hi sorry for the late reply, I ddnt get any notifications from the reply which is weird I just saw from my activity that the status is "suggested answer" thats why I took a look at the post.

Im not much of an expert with html/css/javascript/jquery but I am actively studying and learning.
what im trying to achieve is hide fields if certain conditions are not met but somehow when I add forms in the power pages site it doesn't have the flexibility to do this.

I can't get around my head on how I will be able to make the forms look better with css since its just enclosed in entityform, how will I for example put design to a certain field in a form like put classes, names and ids

how can I conditionally hide fields if the form is just this code :
{% entityform name: 'Create a report' %}
for example in this entity form I have fields named "Email" and "Phone" which should be hidden if the field "Disclose information" selected is "Yes"

also I want in other fields to have a guide below depending on what is selected in the drop down. I am aware that you can do this via javascript but having only the code "entityform name:" I do not know how I will be able to do this, I do now know how i will be able to add classes in the fields

can you guide me where I can study to do this? There's not much guides or videos on power pages

Was this reply helpful? Yes No
Suggested answer

Fubar 8,058 Super User 2025 Season 2 on at

Like (1)

Report

Is there anyway we can code the forms for more customizability in the UI?

Just adding to what Oliver said...

You can add additional validations using JQuery/JavaScript and/or Plugin (.NET) code.

Show/hide fields on the Basic Form etc using JQuery/JavaScript or CSS

Set optional fields on the Basic Form etc mandatory using JQuery/JavaScript

If needed, you can create a completely custom page using standard HTML and using the Portals Web API to create/update etc. and either Liquid fetchxml or the Portals Web API to retrieve initial values e.g. if editing existing records.

https://learn.microsoft.com/en-us/power-pages/configure/add-custom-javascript

https://learn.microsoft.com/en-us/power-pages/configure/web-api-overview

https://learn.microsoft.com/en-us/power-pages/configure/write-update-delete-operations#web-api-ajax-samples

"i can see some is basic-forms but it doesnt contain anything so im not sure" - you may need to clarify what you mean by this. Basic Forms were originally called Entity Forms (why the keyword is entityform ), Multi-Step forms were Web Forms (and later called Advanced Forms before becoming multi step). The Liquid code is just saying render the basic form with a name of "Create a report", the Create a report basic form would define if it is readonly, edit or insert/create then also be associated with a Dataverse Table & Form (the Dataverse Form has the fields that will be displayed).

Was this reply helpful? Yes No
Suggested answer

oliver.rodrigues 9,342 Most Valuable Professional on at

Like (1)

Report
Is there anyway we can code the forms for more customizability in the UI?

Can you provide more details on what you are trying to achieve?

A few points here that might be helpful:

you can add as many complex validations as you need using JavaScript

some less complex validations you can achieve with Basic Form metadata

I don't think you can render the Entityform object completely custom (you can do that with Entitylist) - but not sure you would achieve what you are looking for

majority of my projects, I can apply JS / custom CSS to get the forms to behave as needed

in some more rare occasions, I would use custom HTML + Portal Web API to perform CRUD operations if needed

server-side validations would also be something I do often depending on the scenario (plug-ins / workflows)

the submit button by default creates or updates a record in a Dataverse table, this is according to the basic form mode

did you mean a different table?

Was this reply helpful? Yes No