Kindly refer the previous post, here we will be adding style to the component created in the post.
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
Nishant Rana's Weblog 
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
LikeLiked by 1 person
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!
LikeLiked by 1 person
Thanks Pradeep. Will try out
LikeLiked by 1 person
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?
LikeLike
Did you try updating the version number of the component, rebuild and deploy ?
LikeLike