Customer experience | Sales, Customer Insights,...

How to change CSS for entity form and entity lists?

(0) Share

Report

Posted on by Community Member

I would like to use personalize the layout of the entity forms and entity list using my own css.

Could someone please guide me on how to do so?

I have the same question (0)

All responses (6)

Answers (0)

Community Member on at

Like (0)

Report
Copy link

Link copied!

I would like to use personalize the layout of the entity forms and entity list using my own css.

Could someone please guide me on how to do so?

Was this reply helpful? Yes No
Suggested answer

cloflyMao 25,210 on at

Like (0)

Report
Copy link

Link copied!

Hi Neeraja,

An entity form is associated with a form in Dynamics, therefore, you can change layout of the corresponding form in form editor, it will reflect on entity form in portal.

If you would like to only change layout of form in portal, to apply own css to entity form or entity list, we can take following steps.

1. Find the web page record that we added entity form or entity list.

2. Open the associated localized content record.

3. Add custom css in Advanced > Custom CSS

Result:

In addition, it may takes several minutes to sync modification, you can force portal to refresh in https://make.powerapps.com/

Power Apps > Apps > Portal > Edit > Browse website.

Regards,

Clofly

Was this reply helpful? Yes No
urklnme 441 on at

Like (0)

Report
Copy link

Link copied!

I can add custom css.

How do I identify the html elements of the entity list and which css is being applied to them?

I would like to add:

width:200px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

to a field in the entity list.

yes, I am still fairly new to the powerapps portal and css.

Was this reply helpful? Yes No
Suggested answer

Prakash Kalimuthu on at

Like (0)

Report
Copy link

Link copied!

Hi Neeraja,

In portal, entity list and entity form will be associated with webpage.

go to localized content of webpage and under Advanced section of custom css write your custom code.

to find html elements of form or list, go to browsers developer tools and using selector you can find the html element id or class.

finally, apply necessary styling to it.

Please mark it as resolved, if it answers your question.

Regards,

Prakash

Was this reply helpful? Yes No
urklnme 441 on at

Like (0)

Report
Copy link

Link copied!
Thank you Prakash. I did add custom jquery in the entity list/options/custom javascript field.

I had the task of making a multi-line text(MLT) field appear on each row of a entity list and be scrollable, but the height of the field should be only 3 rows high. The MLT was in the ninth position on each row.

I used this jquery/CSS to achieve this.

})
$(".entitylist.entity-grid").on("loaded", function () { var rows = $("table tr td:nth-child(3)").length; for (var i = 0; i < rows; i ) { $("table tr td:nth-child(8)").eq(i).css('display', '-webkit-box'); $("table tr td:nth-child(8)").eq(i).css('overflow', 'hidden'); $("table tr td:nth-child(8)").eq(i).css('text-overflow', 'ellipsis;'); $("table tr td:nth-child(8)").eq(i).css('-webkit-line-clamp', '3'); $("table tr td:nth-child(8)").eq(i).css('-webkit-box-orient', 'vertical'); $("table tr td:nth-child(8)").eq(i).addClass('descScroll-width'); } })

the row in the entity list appears like

I came up with this solution by combining the code from several other posters on the internet and trial-by-error.

Was this reply helpful? Yes No
Prakash Kalimuthu on at

Like (0)

Report
Copy link

Link copied!

Awesome.

Kindly, mark it as resolved, If it resolves your problem/question/issue.

Regards,

Prakash

Was this reply helpful? Yes No