Customer experience | Sales, Customer Insights,...

CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

(0) Share

Report

Posted on by Pannir Selvam

I am working as CRM Developer. I created Model Driven Apps in Dynamics 365 CRM. I have designed the Form using Form Editor in Power Apps. The default settings and Stylesheet for the form does not contain the borders for controls. I want to apply border for the all controls Text Fields.

I have checked the Form Design by HTML Code View- Inspect from chrome Browser.

I tried to set the stylesheet based on id for the control. But, every time it runs id series and generated automatically. Since id is not constant value. ID based CSS applied gets failed.

I tried to set the stylesheet based on class name for the control. But, I do not know what is the default framework used by Power Apps for Form Designing.

Dynamics 365 CRM - default form class name for the forms is different.

.ms-crm-InlineEditLabel

.ms-crm-Inline-Value

.ms-crm-FormSection-Container

.ms-crm-ListArea

form created class name using power apps is different.

class="pa-ff pa-aq pa-p pa-ar pa-lb pa-lc

Whether we need to add any additional Package support for StyleSheet design class name similar to default forms designed in Dynamics 365 CRM.

Can Somebody provide a proper link to customize the Model Driven Apps Form Designing Customization using Sylesheet.

CRM_2D00_form_2D00_design_2D00_stylesheet_2D00_default.png

I have the same question (0)

All responses (6)

Answers (0)

Suggested answer

Guido Preite 54,086 Moderator on at

Like (1)

Report

The CSS of a model driven app can't be customized, if you change the CSS by using JavaScript attached to an OnLoad event it's considered an unsupported customization.

Was this reply helpful? Yes No
Suggested answer

Pannir Selvam 10 on at

Like (0)

Report

Sir, Thanks for the reply. Whether is there a possibility if Microsoft provides the Power Apps -Model Driven App default CSS StyleSheet details like CSS Frameworks Bootstrap, Skelton.

Any way Power Apps Developer created a unique CSS Framework internally used for the Power Apps Development. Only, If we know the details we can do the customization.

Note:

But, Default subscribed Entities of Sales,Contacts,Marketing. Internally, if i create a Form using Settings->Customization->StockOrders->Forms-New Form. I am able to apply the StyleSheet.

I don't know what makes the Form functionality different creating Model Driven App Individually and a Form created using default entities provided in Dynamics 365 CRM.

I found a link providing customization for default entities.

https://www.linkedin.com/pulse/how-colorize-microsoft-dynamics-crm-20132015-crm-consultant/

Still checking the possibility. Hope to get the good result. Otherwise its a DrawBack of Power Apps Low-Code Programming. Making Complex applying StyleSheet to Model Driven Apps.

Was this reply helpful? Yes No
Suggested answer

Guido Preite 54,086 Moderator on at

Like (0)

Report

as I wrote before: CSS of model driven forms can't be changed. If you change it using javascript (as the link you posted) is unsupported.

I am not aware of Microsoft plans to allow CSS customizations in model driven apps

Was this reply helpful? Yes No
Suggested answer

Pannir Selvam 10 on at

Like (0)

Report

Sir, I have successfully applied the StyleSheet for the Model Driven apps - Forms designed.

Loaded this script in onload event of the Form.

My JavaScript Code:

*************************

function LoadCSS() {

//path="htttp://dynamics.com//WebResources/new_blanketcss";//you can use the resource link if you require
var path ="../WebResources/new_blanketcss";
alert("Apply CSS for the Form");
console.log("File path:"+path);
var head = window.parent.document.getElementsByTagName('head')[0];
var link = document.createElement('link');

link.rel = 'stylesheet';
link.type = 'text/css';
link.href = path;
link.media = 'all';

window.parent.document.head.appendChild(link);

}

my CSS Code:

*****************

General:

input[type="text"] {
border : 1px solid black !important;
}

Specific:

input[data-id="new_blanketorder.fieldControl-text-box-text"] {
border : 1px solid black !important;
}

After Page Loading :

Use Inspect->Elements to select the specific text box in the Form.

Use Source to display the CSS of the Form loaded:

Styles: Changes the default stylesheet parameter values generated by power apps of the form text box specified using the classname.

.pa-jj {

border-width:1px;

}

Note:

you can colorize the Form as per your requirement using this technique.

Was this reply helpful? Yes No
Guido Preite 54,086 Moderator on at

Like (0)

Report

I didn't say it is not possible, I said it is unsupported.

Was this reply helpful? Yes No
Himanshu GTS 5 on at

Like (0)

Report

Hi, is it also possible to change the CSS of Home Grid in model driven app using javascript or any other way?

Was this reply helpful? Yes No

Join the conversation

Community site session details

CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

Helpful resources

Quick Links

Responsible AI policies

Neeraj Kumar – Community Spotlight

Congratulations to the November Top 10 Community Leaders!

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates

Community site session details

CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

Helpful resources

Quick Links

Responsible AI policies

Neeraj Kumar – Community Spotlight

Congratulations to the November Top 10 Community Leaders!

Subscribe to this forum!

Select categories

Leaderboard > Customer experience | Sales, Customer Insights, CRM

Featured topics

Product updates