{"id":23985,"date":"2020-07-02T12:54:48","date_gmt":"2020-07-02T12:54:48","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=23985"},"modified":"2020-07-02T12:54:48","modified_gmt":"2020-07-02T12:54:48","slug":"how-to-use-sprite-image-in-pcf-control-in-dynamics-365-crm","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-use-sprite-image-in-pcf-control-in-dynamics-365-crm\/","title":{"rendered":"How to use Sprite Image in PCF Control in Dynamics 365 CRM"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>This blog will help you to understand how to load\/add sprite image and how to use images in sprite image for PCF Control. An image sprite is a collection of images put into a single image. A web page with multiple images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Every image in image sprites has unique position name, stored in class name to load images.<\/p>\n<p>Here, we are creating a sample control that adds sprite image in PCF Control (\u2018ImageAddControl\u2019)<\/p>\n<p>Follow below steps to add sprite image in PCF control:<\/p>\n<ul>\n<li>Create \u2018Img\u2019 folder under PCF Control (\u2018ImageAddControl\u2019) and add sprite images in same.<\/li>\n<\/ul>\n<p>Create a \u2018Css\u2019 folder and in that add \u2018ImageAddControl.css\u2019 file that contains all image\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position class name.<\/p>\n<p style=\"padding-left: 120px;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-23986\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/1-PCF-Control.png\" alt=\"PCF Control\" width=\"400\" height=\"440\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/1-PCF-Control.png 400w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/1-PCF-Control-273x300.png 273w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<ul>\n<li>Then add sprite image(\u2018Spriteimg.png\u2019) in \u2018ControlManifest.Input.xml\u2019 file under the resource tag, then add img tag and specify the path of image as shown below:<\/li>\n<\/ul>\n<p>&lt;resources&gt;<\/p>\n<p>&lt;code path=&#8221;index.ts&#8221; order=&#8221;1&#8243;\/&gt;<\/p>\n<p>&lt;img path=&#8221;img\/Spriteimg.png &#8220;\/&gt;<\/p>\n<p>&lt;\/resources&gt;<\/p>\n<ul>\n<li>Create component folder under PCF Control to add React class component (loginCard) in folder.<\/li>\n<\/ul>\n<p>Add component in the \u2018index.js\u2019 file and pass the PCF context value to the component.<\/p>\n<p>this._container\u00a0=\u00a0document.createElement(&#8220;div&#8221;);<\/p>\n<p>container.appendChild(this._container);<\/p>\n<p>ReactDOM.render(<\/p>\n<p>React.createElement(LoginCard,\u00a0{<\/p>\n<p>Contextdata:\u00a0context,<\/p>\n<p>})<\/p>\n<p>,\u00a0this._container<\/p>\n<p>);<\/p>\n<ul>\n<li>Write the below code in component (loginCard). Use resources API in the \u2018componentDidMount\u2019 method to load the sprite image defined in \u2018ControlManifest.xml\u2019. Image content is stored in base64 encoding.<\/li>\n<\/ul>\n<p>The resources.getResource method takes the input as the web resource name defined in\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0the control manifest and loads that web resource.<\/p>\n<p>const\u00a0DefaultSpriteImg:\u00a0string\u00a0=\u00a0&#8220;Spriteimg.png&#8221;;<\/p>\n<p>componentDidMount()\u00a0{<\/p>\n<p>this.state.context.resources.getResource(<\/p>\n<p>DefaultSpriteImg,<\/p>\n<p>this.setImage.bind(this,\u00a0false,\u00a0&#8220;png&#8221;),<\/p>\n<p>this.showError.bind(this)<\/p>\n<p>);<\/p>\n<p>}<\/p>\n<p>setImage(shouldUpdateOutput:\u00a0boolean,\u00a0fileType:\u00a0string,\u00a0fileContent:\u00a0string)\u00a0{<\/p>\n<p>var\u00a0imgUrl\u00a0=\u00a0this.generateImageSrcUrl(fileType,\u00a0fileContent);<\/p>\n<p>const\u00a0spriteUrl\u00a0=\u00a0\u00a0mergeStyles({<\/p>\n<p>backgroundImage:\u00a0&#8220;url(&#8221;\u00a0+\u00a0imgUrl\u00a0+\u00a0&#8220;)&#8221;,<\/p>\n<p>display:\u00a0&#8220;block&#8221;,<\/p>\n<p>backgroundRepeat:\u00a0&#8216;no-repeat&#8217;<\/p>\n<p>});<\/p>\n<p>this.setState({<\/p>\n<p>spriteImgUrl:\u00a0spriteUrl<\/p>\n<p>});<\/p>\n<p>}<\/p>\n<p>generateImageSrcUrl(fileType:\u00a0string,\u00a0fileContent:\u00a0string):\u00a0string\u00a0{<\/p>\n<p>return\u00a0&#8220;data:image\/&#8221;\u00a0+\u00a0fileType\u00a0+\u00a0&#8220;;base64,&#8221;\u00a0+\u00a0fileContent;<\/p>\n<p>}<\/p>\n<p>showError()\u00a0{<\/p>\n<p>var\u00a0error\u00a0=\u00a0&#8220;error\u00a0while\u00a0loading\u00a0image&#8221;;<\/p>\n<p>alert(error);<\/p>\n<p>}<\/p>\n<ul>\n<li>The successCallback will be triggered using file content and image URL will be created and stored in the \u2018imgUrl\u2019 variable. Create CSS class name (\u2018spriteImgUrl\u2019) using the imgUrl and mergeStyles(office-fabric-ui) method.<\/li>\n<li>Use (\u2018spriteImgUrl\u2019) CSS class name with image class name that is in CSS file to load the image in sprite image.<\/li>\n<\/ul>\n<p>&lt;div\u00a0className={this.state.spriteImgUrl\u00a0+\u00a0&#8221;\u00a0openrecord-icon&#8221;}\u00a0\u00a0&gt;&lt;\/div&gt;<\/p>\n<p>Then by deploying this PCF control in CRM, you can use solution or directly push using the command. Here we can see one image of an open record on display from sprite image. Similarly, you can load multiple images from sprite image.<\/p>\n<p style=\"padding-left: 80px;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-23987\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/2-PCF-Control.png\" alt=\"PCF Control\" width=\"453\" height=\"411\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/2-PCF-Control.png 453w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/07\/2-PCF-Control-300x272.png 300w\" sizes=\"(max-width: 453px) 100vw, 453px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>So, load\/add sprite image and easily use these images in sprite image for PCF Control.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction This blog will help you to understand how to load\/add sprite image and how to use images in sprite image for PCF Control. An image sprite is a collection of images put into a single image. A web page with multiple images can take a long time to load and generates multiple server requests.\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-use-sprite-image-in-pcf-control-in-dynamics-365-crm\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":23988,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[18,19,1929],"tags":[],"class_list":["post-23985","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365-v9-2","category-dynamics-crm","category-pcf"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=23985"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/23985\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/23988"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=23985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=23985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=23985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}