![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal.png\")
<\/p>\n<\/p>\n
During a recent project, a client wanted a consistent banner design across multiple pages in Power Pages Design Studio, with customizable text displayed over the banner and it was a repeated task for the client. Also, the client had basic knowledge of the Power Pages<\/a> Design Studio but they were not familiar with Power Pages Management which is linked with coding.<\/p>\n To overcome this scenario, we have created a custom component for the client, and now the client is using the same custom component in the designer studio for multiple pages with different values\/data.<\/p>\n First, we have to create a Web Template in which you can allow a maker to pass parameters, you need to add a\u00a0{% manifest %}<\/strong>\u00a0tag to the web template.<\/p>\n The manifest is a JSON object that defines the properties of the web template displayed in the design studio. The parameters relate to variables that developers use in their source code, and low-code makers can configure their values.<\/p>\n Here\u2019s a breakdown of the key properties used when configuring the {% manifest %}<\/strong> tag in a Web Template for a Custom Component:<\/p>\n By setting the type<\/strong> to \u2018Functional\u2019<\/strong>, you enable the web template component to be added via the \u201cAdd component\u201d<\/strong> process in Design Studio.<\/p>\n A friendly name for the web template component<\/p>\n A brief explanation of the web template component<\/p>\n This specifies which Dataverse tables the web template can interact with. The logical names of the tables must be listed to ensure correct linking and data flow.<\/p>\n Set of parameters with specific properties that define their usage.<\/p>\n We created a Banner Component that accepts the URL of the banner Image, Title, and Subtitle as a parameter in the custom component with the below source code.<\/p>\n Once the Web Template with the {% manifest %}<\/strong> tag is created, it will automatically appear in the Power Pages Design Studio.<\/p>\n To use the custom component please follow the below steps:<\/p>\n Once the custom component is added now click on the Edit Custom Component<\/strong> tab it will open a popup where we can provide values for the parameters declared in the manifest <\/strong>tag.<\/p>\n In our scenario, we have passed values to the parameters which are Banner Image URL<\/strong>, Title<\/strong>, and Subtitle<\/strong>.<\/p>\n After passing the values to the parameters it will dynamically render the component on the page.<\/p>\n In our scenario, it looks like below:<\/p>\n To showcase the reusability of the Custom Banner Component<\/strong>, we added another page and used the same component while passing a different Banner Image URL<\/strong>, Title<\/strong>, and Subtitle<\/strong> value highlighting its flexibility and ease of use across multiple pages.<\/p>\n Result in the designer studio<\/p>\n Final output on the preview website<\/p>\n With the custom component, you can easily create multiple components tailored to your specific business requirements, offering flexibility and scalability for your website design<\/p>\n During a recent project, a client wanted a consistent banner design across multiple pages in Power Pages Design Studio, with customizable text displayed over the banner and it was a repeated task for the client. Also, the client had basic knowledge of the Power Pages Design Studio but they were not familiar with Power Pages\u2026 Read More: Add a Custom Component (Preview) in the Power Pages Portal »<\/a><\/span><\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2763],"tags":[2901],"class_list":["post-40014","post","type-post","status-publish","format-standard","hentry","category-power-pages","tag-power-pages-portal"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\tStep-by-Step Guide: To create a Custom Component in Power Pages Portal<\/strong><\/h3>\n
Manifest Properties<\/strong><\/h3>\n
\n
\n
\n
\n
\n
Properties of params<\/strong>:<\/h3>\n
\n
![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-1.png\")
<\/p>\n{% manifest %}\r\n{\r\n\"type\": \"Functional\",\r\n\"displayName\": \"Banner\",\r\n\"description\": \"This component displays banner with there title\",\r\n\"tables\": [\"account\"],\r\n\"params\": [\r\n{\r\n\"id\": \"bannerUrl\",\r\n\"displayName\": \"Banner Image URL\",\r\n\"description\": \"Banner url which displayed in background\"\r\n},\r\n{\r\n\"id\": \"title\",\r\n\"displayName\": \"Title\",\r\n\"description\": \"Title of product\"\r\n},\r\n{\r\n\"id\": \"subtitle\",\r\n\"displayName\": \"Subtitle\",\r\n\"description\": \"Subtitle of product\"\r\n}]\r\n}\r\n{% endmanifest %}\r\n<!--additional web template code to use parameters to specialized functionality-->\r\n{% assign banner_url = bannerUrl %}\r\n{% assign banner_Title = title %}\r\n{% assign banner_Subtitle = subtitle %}\r\n<div class=\"banner\">\r\n<img src=\"{{banner_url}}\" alt=\"{{banner_Title}} Banner\" class=\"banner-image\">\r\n<div class=\"banner-content\">\r\n<h1>{{banner_Title}}<\/h1>\r\n<p>{{banner_Subtitle}}<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/pre>\n\n
![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-2.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-3.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-4.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-5.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-6.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-7.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-8.png\")
<\/p>\n![\"Custom](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Custom-Component-in-Power-Pages-Portal-9.png\")
<\/p>\nConclusion<\/strong>:<\/h2>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/11\/Canvas-App.gif\")
<\/a><\/pre>\n","protected":false},"excerpt":{"rendered":"