{"id":2655,"date":"2022-06-12T22:23:27","date_gmt":"2022-06-13T05:23:27","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=2655"},"modified":"2022-06-12T23:20:51","modified_gmt":"2022-06-13T06:20:51","slug":"power-app-component","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/power-app-component\/","title":{"rendered":"Power App Component"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Create Component<\/h2>\n\n\n\n<p>Setup and create a reusable component to use as a Logo header with Title and Home Screen navigation. <\/p>\n\n\n\n<p>From the Tree View select Component and + New component <\/p>\n\n\n\n<p>Select the Component1 created <br>Rename the component to Logo_Title<br>Set Height: 100 and Width: 400<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1989\" height=\"269\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-5.png\" alt=\"\" class=\"wp-image-2592\"\/><\/figure>\n\n\n\n<p>Add Containers:<br>Click on the Insert + on left Pane, From the Insert Pane under Layout menu select Horizontal Container<br>Resize the Container to fill Top of screen, <\/p>\n\n\n\n<p>Add Logo:<br>Insert &#8211; Media &#8211; Image<br>Adjust Logo to position using mouse or enter the X Y Position in property pane<br>In the property pane under properties select image + Add an image file using the file selection window<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1991\" height=\"363\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-8.png\" alt=\"\" class=\"wp-image-2595\"\/><\/figure>\n\n\n\n<p>Add a Vertical Container Next to Logo, Insert a Text Label from the insert menu, in the properties pane set Width : Parent.Width and set Align to Align.Center<br>Set the Text property equal to Logo_Title.Title_Text_1, (An error warning may appear as variable has not been set on Component). <br>Next add a Horizontal container that will hold navigation buttons, <br>Set the LayoutMinWidth: 100 and LayoutminHeight: 40<br>Set Width to Parent.Width and Height to Parent.Height<br>Add Home icon And set Height to Parent.Height<br>*Do not rename buttons to anything Specific keep them as button and sequence to make the component layout generic<\/p>\n\n\n\n<p>Set Icon OnSelect property To a function Navigate(Logo_Title.Homescreen_1, ScreenTransition.Fade)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-11.png\" alt=\"\" class=\"wp-image-2603\" width=\"703\" height=\"238\"\/><\/figure>\n\n\n\n<p>Create + New custom property, set Display name to Homescreen_1 and Description: Return to Home Screen, Property Type: Input, Data type: Screen <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-10.png\" alt=\"\" class=\"wp-image-2602\" width=\"371\" height=\"326\"\/><\/figure>\n\n\n\n<p>+ New custom Property, Set Display name Title_Text_1, Description: Title Text, Data type: Text<br><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-12.png\" alt=\"\" class=\"wp-image-2604\" width=\"374\" height=\"330\"\/><\/figure>\n\n\n\n<p>To change the color of the icon modify the Color property<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/03\/image-13.png\" alt=\"\" class=\"wp-image-2605\" width=\"657\" height=\"284\"\/><\/figure>\n\n\n\n<p>On Screens view select screen to add Component. Under Custom Menu selection the Component should appear on the drop down list.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/06\/image.png\" alt=\"\" class=\"wp-image-2657\" width=\"446\" height=\"215\"\/><\/figure>\n\n\n\n<p>After selecting the component it will be added to the Screen, Rename to something appropriate as everytime you add the component to a screen the component will get _# aggregated to it.<\/p>\n\n\n\n<p> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/06\/image-1.png\" alt=\"\" class=\"wp-image-2658\" width=\"525\" height=\"202\"\/><\/figure>\n\n\n\n<p>The Properties for the component can now be set such as height, width, and Custom Data <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1541\" height=\"485\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/06\/image-2.png\" alt=\"\" class=\"wp-image-2659\"\/><\/figure>\n\n\n\n<p>For the Homescreen_1 property the Apps Home Screen or landing page should be set to the screen name.<\/p>\n\n\n\n<p>To import component to another App in the same SharePoint tenant Under Custom Select Import Component and select the app to import from. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/06\/image-3.png\" alt=\"\" class=\"wp-image-2664\" width=\"435\" height=\"483\"\/><\/figure>\n\n\n\n<p>Make sure each object has a unique name. If there are any objects in any of the components or screens with the same name they may be replaced with the import. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/doubleecpu.com\/wp-content\/uploads\/2022\/06\/image-4.png\" alt=\"\" class=\"wp-image-2665\" width=\"354\" height=\"129\"\/><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create Component Setup and create a reusable component to use as a Logo header with Title and Home Screen navigation. From the Tree View select Component and + New component Select the Component1 created Rename the component to Logo_TitleSet Height: 100 and Width: 400 Add Containers:Click on the Insert + on left Pane, From the &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/doubleecpu.com\/index.php\/power-app-component\/\" class=\"more-link\">Read more<span class=\"screen-reader-text\"> &#8220;Power App Component&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2655","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/2655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=2655"}],"version-history":[{"count":2,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/2655\/revisions"}],"predecessor-version":[{"id":2666,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/2655\/revisions\/2666"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=2655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}