Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Microsoft Dynamics CRM forum / CRM - Power Apps Model...
Microsoft Dynamics CRM forum
Suggested answer

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

(0) ShareShare
ReportReport
Posted on by Pannir Selvam 10

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.pngCRM_2D00_form_2D00_design_2D00_stylesheet_2D00_required.png

 

Categories:
Development / Customization / SDK
  • Himanshu GTS Profile Picture
    Himanshu GTS 5 on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

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

  • Guido Preite Profile Picture
    Guido Preite 54,063 Moderator on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

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

  • Suggested answer
    Pannir Selvam Profile Picture
    Pannir Selvam 10 on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

    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.

    Model_2D00_driven_2D00_app_2D00_stylesheetapplied.png

  • Suggested answer
    Guido Preite Profile Picture
    Guido Preite 54,063 Moderator on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

    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

  • Suggested answer
    Pannir Selvam Profile Picture
    Pannir Selvam 10 on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

    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.

     

  • Suggested answer
    Guido Preite Profile Picture
    Guido Preite 54,063 Moderator on at
    RE: CRM - Power Apps Model Driven Apps - Customize CSS to apply border for the Controls

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Anton Venter – Community Spotlight

Kudos to our October Community Star of the month!

Announcing Our 2024 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Dynamics 365 Community Newsletter - September 2024

Check out the latest community news

more Community News

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 290,537 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 228,520 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,148

Leaderboard

Featured topics

Product updates

Dynamics 365 release plans