How to – Add Style to Custom Component in PowerApps Component Framework


Kindly refer the previous post, here we will be adding style to the component created in the post.

https://nishantrana.me/2019/06/06/step-by-step-create-a-very-simple-powerapps-custom-component-to-show-the-guid-of-the-record/

Let us continue with our previous sample component and try adding style to it.

  • Open ControlManfiest.Input.xml and specify the CSS file to be referred.

  • Uncomment the CSS tag in the manifest and create a new folder named CSS and place the CSS file there.

  • Edit the index.ts file and add the class to the label

  • Edit the CSS file

  • Edit the version number in case of updating the existing control in ControlManifest.Input.xml

  • Followed by the build command
  • npm run build


  • After the successful build, we can see the CSS added in the out folder for the component


  • Run the MSBuild command to generate the new solution zip files



  • Import the managed solution.
  • Open any of the existing contact records, we can see the style is applied to the control.

Hope it helps..

Advertisements

Author: Nishant Rana

I love working in and sharing everything about Microsoft.NET technology !

7 thoughts on “How to – Add Style to Custom Component in PowerApps Component Framework”

  1. Hi Nishant, great blog as always!

    Im currently trying out PCF and on click of a button, I would like to make a Get request by calling an external Api by doing a XMLHttpRequest (jQuery).

    I tried installing jQuery via npm and imported it in the index.ts file. However I’m hit with build error.

    Am I missing out something or doing something wrong? Pl help

    Liked by 1 person

    1. u can use fetch function from the below relative path :

      –>node_modules–>typescript–>lib–>lib.dom.d.ts –>fetch

      fetch(url, {
      method: “GET”, // *GET, POST, PUT, DELETE, etc.
      //mode: “no-cors”, // no-cors, cors, *same-origin
      // cache: ‘no-cache’, // *default, no-cache, reload, force-cache, only-if-cached
      // credentials: ‘same-origin’, // include, *same-origin, omit
      headers: {
      // “Access-Control-Allow-Headers” : “Origin, X-Requested-With, Content-Type, Accept”,
      // “Access-Control-Allow-Methods” : “GET, POST, PATCH, PUT, DELETE, OPTIONS”,
      // “Access-Control-Allow-Origin” : “*”
      // ‘Content-Type’: ‘application/x-www-form-urlencoded’,
      }
      // redirect: ‘follow’, // manual, *follow, error
      // referrer: ‘no-referrer’, // no-referrer, *client
      }).then(data => {
      console.log(“Data”);
      console.log(data);
      })

      Hope this is helpful!

      Liked by 1 person

  2. When I do this, the changes are not reflected! I have cleared the cached, tried different browsers, verified the CSS file is in the ZIP, but the changes are not pulled within Dynamics. Any thoughts on this?

    Like

Please share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clavin's Blog

Power Automate - Power Apps - SharePoint Online - Azure - Nintex - K2 - Artificial Intelligence

Sat Sangha Salon

An Inquiry in Being

The Indoencers

The Influencers & Influences of Indian Music

Monika Halan's blog

Hand's-free money management

D365 Demystified

A closer look at Microsoft Dynamics 365.

Microsoft Mate (msftmate) - Andrew Rogers

Experienced consultant primarily focused on Microsoft Dynamics 365 and the Power Platform

Knowhere365

Specific topics by Django Lohn on the whole Microsoft365 Stack

Manmit Rahevar's Blog

One Stop Destination for Microsoft Technology Solutions

RelatoCorto

Blog Fiction

MG

Naturally Curious

Brian Illand

Power Platform and Dynamics 365

Steve Mordue MVP

A Microsoft Business Applications MVP

Subwoofer 101

Bass defines your home theater

SQLTwins by Nakul Vachhrajani

SQL Server tips and experiences dedicated to my twin daughters.

Everything D365

Discovering Azure DevOps and D365 Business Applications

Tech Wizard

Lets do IT Spells

Two Bite Tips

Valuable Tips To Grow Your Business

XRM Tricks (Power Platform & Dynamics CRM )

Power Platform & Dynamics CRM

CRM TIPS BY PRM

Mail to crmtipsbyprm@gmail.com for queries and suggestions

nijos.dev

Giving back to the community what I have learned

xrm CRM Dynamics

Dynamics CRM Technical & Functional Info

Dynamics 365 Blogs - Explained in unique way

Sometimes you need to look at things from different perspective.

CRM Keeper

Dynamics 365 Customer Engagement, CRM, Microsoft CRM, Dynamics CRM

EVOLVED365

Step into the world of a Dynamics 365 Consultant

Dianamics PCF Lady

Diana & Dynamics 365 & Power Platform

Sara Lagerquist

No Code Customization Concepts

innovativeaj

developer, designer, writer, fun loving, patriotic, humble and a sweet person inside out :) love and respect people who have a great sense of humor.

Temmy Wahyu Raharjo

Dreaming to be a clean coder and TDD minded programmer.

Transform 365

We blog about problems we face and code we write to help others

Virendra Agrawal's Blog

Blogs, News and Insights of Dynamics 365 world

Jukka Niiranen

Thinking forward about Microsoft Power Platform

Amar Singh

Share your knowledge. It’s a way to achieve immortality.

Lokin Shah

Dynamics 365 - Sharing edge cases and ideas

%d bloggers like this: