{"id":3641,"date":"2019-05-03T11:59:37","date_gmt":"2019-05-03T11:59:37","guid":{"rendered":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/blog\/?p=3641"},"modified":"2019-05-03T11:59:37","modified_gmt":"2019-05-03T11:59:37","slug":"how-to-create-a-user-friendly-sharepoint-view-with-powerapps","status":"publish","type":"post","link":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/how-to-create-a-user-friendly-sharepoint-view-with-powerapps\/","title":{"rendered":"How to Create a User-friendly SharePoint View with PowerApps"},"content":{"rendered":"

PowerApps<\/strong> is one of the innovative features of the Office 365 environment that allows users to create, connect and share business apps with their teams. Also, it uses minimal\/no-code app building mechanisms for the adjacent Office 365 offerings like SharePoint, Dynamics, etc. With the help of PowerApps, you can access these applications, forms, or views on any device without even accessing the parent applications where the PowerApps app is embedded.<\/p>\n

SharePoint provides an elegant integration with PowerApps. This connection can be used to create a mobile\/tablet friendly view for SharePoint lists and libraries. But, many users often don\u2019t understand how to create a user-friendly SharePoint View with PowerApps. So, here we will discuss how you can create a new SharePoint View using PowerApps.<\/p>\n

For better understanding, let\u2019s start with a simple list (Shown below) that contains a Title and City field (Type \u2013 Single Line of Text), for which we will create a new view \u201cMy PowerApps View.\u201d<\/strong> Follow the below steps to learn:
\n\"\"<\/p>\n

1.\tSign-in to SharePoint and go to SharePoint list. Now, click \u201cPowerApps\u201d <\/strong>in the top-bar and select \u201cCreate an App.\u201d<\/strong><\/p>\n

\"\"<\/p>\n

2.\tThe \u201cCreate an app\u201d<\/strong> wizard will appear on the screen. Enter the name for the desired view and click \u201cCreate.\u201d<\/strong> Here we have named it \u201cMy PowerApps view.\u201d<\/strong><\/p>\n

\"\"<\/p>\n

3.\tOn clicking Create<\/strong>, the PowerApps engine will start loading. It will take some time to load the engine as it builds all the connections from SharePoint and PowerApps. Once the process is complete, you\u2019ll be able to see a default mobile view as shown below.<\/p>\n

\"\"<\/p>\n

There are many options to customize the View for different UI\/UX centric needs and business requirements. Now, let\u2019s see how you can change the default view\u2019s theme. <\/p>\n

\u2022\tLocate the \u201cHome\u201d<\/strong> tab on the top-left corner and click on \u201cTheme,\u201d<\/strong> and then select \u201cAqua.\u201d <\/strong>
\n\u2022\tYou can refer to the below screenshot to understand it better. The theme will be changed instantaneously in design mode.<\/p>\n

\"\"<\/p>\n

4.\tNow, we will change the layout of View to give it a more tile-like appearance. To do this, select the body of the app from the designer, and then select the Layout section<\/strong> from the right-hand Gallery window<\/strong>. From the drop-down, click \u201cTitle and Subtitle on Overlay.\u201d<\/strong> It will refresh and update the screen with the selected layout as shown below:<\/p>\n

\"\"<\/p>\n

5.\tHere we have added two different customizations in the app. Now, we will preview the app before publishing it to SharePoint. Click \u201cPreview the app\u201d<\/strong> button on the top-right corner or press F5.<\/p>\n

\"\"<\/p>\n

Clicking the button will provide a real-time view of the app in a new wizard. You can still go back and make any changes to the app before publishing it.<\/p>\n

\"\"<\/p>\n

6.\tTo test the interaction and responsiveness of the app, click any item or search for any particular record. Here we will search for \u2013 Aditi.<\/strong><\/p>\n

\"\"<\/p>\n

As you can see, searching for any record hides other records. Now, we will show how to display this app as a view in SharePoint.<\/p>\n

7.\tGo to the \u201cFile\u201d<\/strong> tab and click \u201cSave<\/strong>.\u201d<\/p>\n

\"\"<\/p>\n

After saving the settings, you\u2019ll be prompted to the Publish screen. Click \u201cPublish\u201d<\/strong> to publish the view on SharePoint list.<\/p>\n

\"\"<\/p>\n

8.\tNow, go to the original SharePoint list and select \u201cMy PowerApps View\u201d<\/strong> from the PowerApps view.
\n\"\"<\/p>\n

9.\tSelecting the \u201cMy PowerApps View\u201d<\/strong> will display the newly designed tab.
\n\"\"<\/p>\n

User can add new entries from the same view, by clicking the \u201c+\u201d icon. Also, they can sort the records based on their requirements. Using these steps, you can easily create a new View using PowerApps.<\/p>\n

Conclusion<\/strong>
\nPowerApps are specially designed to target users that are outside the context of SharePoint and uses mobiles\/tablets. After installing PowerApps on their Android or iPhone devices and authenticating themselves, they can access this view with the PowerApps URL shared with them. This will elevate the PowerApps experience across SharePoint to its full capacity.<\/p>\n","protected":false},"excerpt":{"rendered":"

PowerApps is one of the innovative features of the Office 365 environment that allows users to create, connect and share business apps with their teams. Also, it uses minimal\/no-code app building mechanisms for the adjacent Office 365 offerings like SharePoint, Dynamics, etc. With the help of PowerApps, you can access these applications, forms, or views […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[79],"tags":[],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts\/3641"}],"collection":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/comments?post=3641"}],"version-history":[{"count":0,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/posts\/3641\/revisions"}],"wp:attachment":[{"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/media?parent=3641"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/categories?post=3641"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teamwp.mydevfactory.com\/abhisek-saha\/aqltech\/wp-json\/wp\/v2\/tags?post=3641"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}