{"id":389,"date":"2024-02-26T09:53:32","date_gmt":"2024-02-26T09:53:32","guid":{"rendered":"https:\/\/poiseddevelopers.com\/reality-tech\/?p=389"},"modified":"2024-04-26T10:12:32","modified_gmt":"2024-04-26T10:12:32","slug":"how-to-create-the-reusable-header-using-component","status":"publish","type":"post","link":"https:\/\/poiseddevelopers.com\/reality-tech\/how-to-create-the-reusable-header-using-component\/","title":{"rendered":"How to Create the Reusable Header Using Component?"},"content":{"rendered":"

What is component?<\/h4>\n

Components are reusable building elements for canvas apps in PowerApps that include one or more controls. Complex capabilities can be enabled by components by utilizing sophisticated features like custom attributes.<\/p>\n

Scenario<\/h4>\n

Assume for the moment that our application will have more than two screens and that we must display a header and footer. Therefore, in this scenario, it will be challenging to maintain the header and footer on each screen if we are not utilizing components. If we need to make any changes\u2014for example, to the font size, title, or logo\u2014we will have to travel through all screen windows. We may make this as a component and use it on different screens to avoid these repeating modifications.<\/p>\n

Creating Application<\/h4>\n

Step 1:<\/strong> Open the Browser and pate the URL:\u00a0https:\/\/make.powerapps.com\/.<\/a><\/p>\n

Step 2<\/strong>: Click \u201cApps\u201d in the left panel.<\/p>\n

Step 3<\/strong>: Click on the \u201cNew app\u201d.<\/p>\n

\"img-01\"<\/p>\n

Step 4<\/strong>: Choose the Blank Canvas app and enter the app\u2019s name as it appears in the image below:<\/p>\n

\"img-02\"<\/p>\n

 <\/p>\n

Step 5<\/strong>: Once the app is created, you will notice the component option is visible.<\/p>\n

Step 6<\/strong>: Click on the Component tab after the screen as show into the below.<\/p>\n

Step 7<\/strong>: Click on the \u201c+ New Component\u201d button and new component will be added to the component screen.<\/p>\n

All the above step as show into the below image.<\/p>\n

 <\/p>\n

\"img-03\"<\/p>\n

Step 8<\/strong>: Rename \u201cComponent1\u201d to \u201cHeader Component\u201d and adjust the \u201cWith\u201d property.<\/p>\n

Step 9<\/strong>: Currently, the component has a height and width of 640. To decrease the height, set it to 25, and observe the reduced component height as shown below:<\/p>\n

\"img-04\"<\/p>\n

Step 10<\/strong>: To display the screen name, you can insert a text label. If you require a home or back icon or any other elements, you can add and arrange them according to your preferences.<\/p>\n

Step 11<\/strong>: For a responsive header, utilize a container control. Incorporate relevant buttons or labels into the header based on your specific requirements.<\/p>\n

Step 12<\/strong>: Add a Horizontal container to your component by clicking on \u201cInsert,\u201d searching for the container control, and adding it.<\/p>\n

\"img-05\"<\/p>\n

Step 13<\/strong>:\u00a0 Once you\u2019ve added the Horizontal Container, adjust the width and X property according to your specific requirements.<\/p>\n