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

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.