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

Author: Nishant Rana

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

5 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

    Like

    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!

      Like

  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

Leave a Reply to ramzz Cancel reply

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.