{"id":13323,"date":"2016-10-13T00:00:00","date_gmt":"2016-10-13T05:00:00","guid":{"rendered":"https:\/\/centricconsulting.com\/post\/office-365-powerapps-deepish-dive-part-2\/"},"modified":"2021-12-15T00:13:21","modified_gmt":"2021-12-15T05:13:21","slug":"office-365-powerapps-deepish-dive-part-2","status":"publish","type":"post","link":"https:\/\/centricconsulting.com\/blog\/office-365-powerapps-deepish-dive-part-2\/","title":{"rendered":"Office 365 PowerApps Deep(ish) Dive \u2013 Part 2"},"content":{"rendered":"

In this series of blogs, we explore the key capabilities in Office 365 and SharePoint to create business solutions, with a primary focus on PowerApps.<\/h2>\n

Instead of listing the functionalities, we help you build a PowerApp.<\/p>\n

Part two\u00a0of a series<\/a>.<\/em><\/p>\n

So, we have created our Datasource, Created our PowerApp, Created a \u2018Home\u2019 Screen, and added a \u201cCreate a New Menu\u2019 button. \u00a0Our Next step will be to create a screen where we can Create our new menu, and wire up the button on the \u2018Home\u2019 screen to navigate to it.<\/p>\n

Create a New Menu Screen<\/h2>\n

From the \u2018Home\u2019 Tab, click on \u2018New Screen\u2019, and then rename the new screen to \u2018createMenu\u2019. \u00a0Next, click the \u2018Layout\u2019 button on the Ribbon, and choose the \u2018Infinite scrolling Canvas layout on the right window pane. \u00a0This will add a title bar and a canvas. \u00a0Delete the Canvas control from the layout. \u00a0This will leave you with a Title bar. \u00a0Change the Text on the Title bar, (and if you want a different color scheme, change the \u2018Fill\u2019 color on the color bar as well:<\/p>\n

\"padd2-1\"<\/p>\n

Next, we will add an \u2018Edit\u2019 Form to the page. \u00a0To do this, just click the Insert tab, then Click \u2018Forms\u2019, and then click \u2018Edit\u2019<\/p>\n

\"padd2-2\"<\/p>\n

Position the Form Control below the Title bar, and to the right of the screen. \u00a0Resize the control so it takes up about half of the screen, but save room at the bottom so we can add a \u2018Submit\u2019 button.\"padd2-5\"<\/p>\n

Next, we will connect this Form to our SharePoint \u2018Menu Form\u2019 list, and the \u2018Menu Item\u2019 list. \u00a0Click \u201cConnect your form to data\u2019 to select the data source. \u00a0Click \u2018Add\u00a0connection\u2019:<\/p>\n

\"padd2-6\"<\/p>\n

Next, we need to point the data connection to our SharePoint lists. \u00a0Find \u2018SharePoint\u2019 in the list of available providers. \u00a0When you select SharePoint, make sure \u2018Connect\u00a0Directly\u2019 is selected and click \u2018Next\u2019. \u00a0(Alternatively, you can also connect PowerApps to your On-Premise SharePoint data sources by using a Data Gateway.)<\/p>\n

\"padd2-7\"<\/p>\n

Now you will need to define the URL to the site where you created the lists we will use for our Data Sources. \u00a0Type in the URL to the site where the lists reside, and then select \u2018Menu Form\u2019 and \u2018Menu Items\u2019 to add the data sources.<\/p>\n

\"padd2-8\"<\/p>\n

Now that the Data Sources have been connected, we will want to add the fields to our form where the submitted values will be stored. \u00a0Just click the visibility \u2018eye\u2019 icon next to each field you want to add. \u00a0In the case of this form, we will add Title, and then fields 1-10.<\/p>\n

\"padd2-9\"<\/p>\n

Once all of our necessary fields have been added to the form, I would recommend changing the labels of each field to something more descriptive for the end users. \u00a0Just double-click each field name to change the label. \u00a0Since this will be a menu, I have added areas for Appetizers, Salads, Entrees and Desserts.<\/p>\n

Configure the Drop-down fields<\/h2>\n

Our next step will be to convert the simple text fields into Drop-downs that will contain filtered selections from the Menu Item list. (i.e. the Appetizers field only shows Appetizer selections.). \u00a0Also, we will want to configure the fields to submit the ID of the list item to each file when the Form is submitted.<\/p>\n

For fields 1-10, click the \u2018123\u2019 Icon next to the field name, and change the field to \u201cAllowed Values\u201d:<\/p>\n

\"padd2-10\"<\/p>\n

Next, click the ellipses next to each field and click \u2018Advanced options\u2019. \u00a0Click Unlock to edit the properties of the field. \u00a0We need to edit the DataCardValuexx.Items property and add this Formula:<\/p>\n

Filter(\u2018Menu Items\u2019, \u201cEntree\u201d in Lower(Section) )<\/strong><\/p>\n

This formula Filters all of the Items from the Menu Form Datasource that are tagged with Entree, in the section column. \u00a0Once the Formula has been added, we can select the Value to show, in this case we want to see the Titles in the drop-down:<\/p>\n

\"padd2-12\"<\/p>\n

Next, change the \u2018Update\u2019 property field formula fromDataCardValuexx.Selected.Value<\/span> to DataCardValuexx.Selected.ID<\/span>.<\/p>\n

\"padd2-13\"<\/p>\n

We now have fully filtered dropdown values that will save the ID number to our SharePoint list when the Form is Submitted.<\/p>\n

Lastly, let\u2019s add a button at the bottom to Submit the Form. \u00a0Just Insert a new button from the Ribbon, and style it as you see fit. \u00a0Place it below the Form we just created.<\/p>\n

\"padd2-14\"<\/p>\n

In the Formula bar, find the \u2018OnSelect\u2019 property, and enter in this Formula: \u00a0SubmitForm(Form1)<\/p>\n

\"padd2-15\"<\/p>\n

Now, when the fields are filled out and the button is clicked, all of the captured values will be saved back to our Menu Form SharePoint List!:<\/p>\n

\"padd2-16\"<\/p>\n

Now that we have our edit form, click on the Home view we created in part one, and then click the Button we created to \u2018Create a new Menu\u2019. \u00a0For its OnSelect property, type in this formula:<\/p>\n

NewForm( Form1 ); Navigate( createMenu, ScreenTransition.Fade<\/span> )<\/strong><\/p>\n

This formula will instantiate a blank Form when clicked, and Navigate to the Edit screen we just created. \u00a0It will also do a \u2018Fade\u2019 transition to the new screen. \u00a0There are few other transitions you can use natively (Cover, Uncover), to provide your users with a fluid experience. \u00a0I recommend experimenting to find what suits you best.<\/p>\n

In Part 3<\/a>, we will create a screen to allow for users to view Menu Forms they have submitted and see the status on them.<\/p>\n","protected":false},"excerpt":{"rendered":"

Read part two of a series on the key capabilities in Office 365 and SharePoint to create business solutions using PowerApps.<\/p>\n","protected":false},"author":86,"featured_media":18125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_oasis_is_in_workflow":0,"_oasis_original":0,"_oasis_task_priority":"","_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","footnotes":""},"categories":[1],"tags":[],"coauthors":[],"acf":[],"publishpress_future_action":{"enabled":false,"date":"2024-07-22 09:34:23","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category"},"_links":{"self":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13323"}],"collection":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/comments?post=13323"}],"version-history":[{"count":0,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/posts\/13323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media\/18125"}],"wp:attachment":[{"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/media?parent=13323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/categories?post=13323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/tags?post=13323"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/centricconsulting.com\/wp-json\/wp\/v2\/coauthors?post=13323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}