SharePoint Lists

As is our standard practice by this point, we start with our data source(s) in SharePoint . Figure 16-1 shows the Actions list.

A screenshot of the actions window has columns for title, description, and order with data underneath.

Since we will be filtering on the Title later, we tell SharePoint that it must be unique. We will use this as the text of our button and the Description as the Tooltip. The Order allows us to position the buttons as desired.

Once the user selects the action, we want her to be able to go through its associated steps, which can include attachments as mentioned. Figure 16-2 shows that we add Action as a lookup column and bring along its Description and ID. We will focus on the Budget action in later screens.

A screenshot of the steps window has columns for title, action, action description and I D, details, and step num with data underneath. The first two rows are highlighted.

We will display the Title as well as the Details, which we configure as rich text so we can have formatting and images. The StepNum column gives us the order of the steps and allows us to insert and reorder down the line as desired. We are now ready to move to Power Apps .

Power Apps: Actions Screen

As with previous examples, we create a blank Canvas app and connect it to our Actions (Figure 16-1) and Steps (Figure 16-2) lists. Figure 16-3 shows the basic design from there. We have added Button1 through Button6. To make it easier to test, we will click on the button and have it display some text to ensure we have the right button. Once we select the right button, we click the Begin button to launch the StepsScreen to see our steps.¹

A screenshot has 6 buttons under the tree view panel in 2 columns and 3 rows. Button 1 is highlighted on the right pane.

As we have seen previously, ClearCollect() creates a new collection (col in this case). The second parameter is the record or table to put into col. We copy our entire Actions list into col, but we also want to add a new column named ButtonRef. ³ The AddColumns() method takes the source (Actions), column name (ButtonRef), and the values of the column. For the values, we use the Switch() statement to decide what we based on the Order column of the list. When the Order is 1, we want Button1, when it is 2, we want Button2, and so on.⁴

How does this new col collection help us? Figure 16-4 show how we can use it together with the LookUp() method to set the Text property of each button.

A cropped screenshot has 6 buttons in 2 columns and 3 rows under the tree view option. Buttons 1 through 4 are labeled as writing, budget, pay, and training.

Our next task is to handle on the OnSelect event for each button. As discussed earlier, we show the action in a label for debugging purposes and then click the Begin button to actually display the steps. This is shown in Figure 16-5.

A screenshot has 4 buttons in 2 columns for writing, budget, pay, and training. A cursor points to the pay button.

We create a new variable, selectedActionItem, which is the entire row of our Actions list that corresponds to the selected button. We look it up via the Title column matching our selectedAction variable . Once this is set, we navigate to the StepsScreen. Note that we could put this code in each of our buttons instead for a cleaner experience (e.g., to avoid the Begin button).

Power Apps: Steps Screen

We initialize a currentStepNum variable to be 1 since we will always begin on the first step. We then create a new collection, colSteps, that will be just the items in our Steps list that match our currently selected action.⁶ We will then be able to use colSteps for our other controls.

Figure 16-6 shows what displays after we click on the Budget button (Button2). You might want to refer to the Steps list in Figure 16-2.

A screenshot has the details of the budget section. The components are supervisor approval, manager approval, sufficient funds, and credit card.

Starting at the top, we have an Action label, a StepTitle label and a Home icon for returning to the ActionsScreen. Most of the middle of the screen is our StepDetails HTML text control. At the bottom left, we have an AttachmentsGallery to display any attachments that have been added in SharePoint . Finally, we have PrevBtn and NextBtn controls to go backward and forward.

We just use our previously defined selectedAction variable (Budget in Figure 16-6).

If there is no attachment ( DisplayName is blank), we don’t display anything. Otherwise, we use our handy anchor HTML tag and set its href property to the AbsoluteUri property and show its DisplayName.

Just to be on the safe side, we check that we are on a step higher than 1. If so, we subtract 1 from the currentStepNum variable . As we see from the preceding code, this will immediately cause the StepTitle, StepDetails, and AttachmentsGallery to load the previous step’s values.

To figure out if we are on the last step, we use the CountRows() method on our colSteps collection. This is shown in Figure 16-7. Notice how the NextBtn has a text of “Submit” and the PrevBtn is enabled.

A screenshot of a donut chart has budget register entry, budget plan, and budget control framework on the inside. The outside highlights the ledger budget, control, forecast, and plan.

If the currentStepNum is less than the number of steps, then it adds 1 to currentStepNum. Otherwise, it calls the Notify() method as a placeholder for more logic such as emailing the information or presenting a screen for filling more data.

Summary

This chapter explored key techniques like dynamically setting button text and keeping track of the current step needed to create a “wizard ” with Power Apps. We learned how to make any attachments available via a link in an HTML text control and how to control our “next” and “previous” buttons to make the user’s experience seamless. We will continue to explore key technologies for this type of system in the next chapter, when we learn how to copy upload user attachments to a SharePoint document library and email links to them.