Parent-Child Relationship Between Tabbed PowerApps Forms

PowerApps has become hugely popular and probably the most widely-used rapid application development service among Microsoft's Power Platform. It has gained more popularity as a replacement of InfoPath forms, especially with SharePoint Lists. A lot of business requirements in the past have needed to have customized forms for user inputs. PowerApps has provided a much easier and simpler way of customizing the forms.

 

In this article, I am going to cover a scenario of Parent-Child relationships between PowerApps Forms. I will be using two SharePoint Lists as my data repository and customize the form on one of the lists.

 

Getting Started

 

To start with we will need two SharePoint Lists: Job Postings and Job Applications. The structure of these two lists will be as defined in the table below,

 

Job Postings		Job Applications
Column Name	Type	Column Name	Type
Title	Single Line of Text	Title	Single Line of Text
Position Description	Multiple Line of Text	Job ID	Lookup (Title: Job Postings)
Expected Skillset	Multiple Line of Text
Technology Area	Choice
Location	Choice
Start Date	Date
End Date	Date

 

Since, we will not be using any attachments on Job Postings list, we can set the “Attachments” setting for Job Postings list to “Disabled”. List Settings -> Advanced Settings -> Attachments.

 

 

Now that we have our lists set up, we can start on customizing the form using PowerApps.

 

Customizing the List Forms

 

In order to customize the list forms using Powerapps, navigate to Job Postings list and click on ‘+ New’. In the form that opens, click on Edit Form -> Customize with Power Apps. It will open up PowerApps and show the default fields for the form.

 

 

As we need to create tabs, we will do some modifications to the form. Let’s start with form customizations.

1. Ensure that in your PowerApps Tree View, you have SharePoint Form 1 selected. We will need to add the ID field on the form, as a hidden field. We will be using the value on this field later in the form.
2. Open the Properties Pane for SharePoint Form 1 and click on Edit Fields. In the pane, that opens, click on Add Field, search for ID. Select and add the field to the form.
   
   
 
3. In the tree view, select the ID Data Card and set the Visible property of DataCard to “false”.
   
   
 
4. Since, we will be using the values of ID and Title fields later in the form, let’s rename the DataCardValue Controls. It makes it easier to use the controls in formulas.
   
   
 
5. Rename Title DataCardValue control to “TitleValue” and ID DataCardValue control to “IDValue”.
   
   
 
6. Now, set the Height of the form to 750 and Y position to 40. This will make some space at the top so that we can place the buttons for tabs.
   
   
7. Before we create tabs on the form, we will need a button that will help to toggle/switch the tabs. So, let's add a Button to the form. In the menu, click on Insert -> Button.
   
   
8. Set the Button properties as follows, by clicking on Advanced tab in the Properties window. It makes it easier to search for the property and update easily. You can always adjust the size and position as per your needs. It is always a best practice to rename your controls and give them appropriate names. I am skipping those steps in this article, since we will not be referencing the controls anywhere.
   
   




Property Name	Value
Text	Show Interest
X	0
Y	600
Width	120
Height	40
OnSelect	Set(varShowInterest, true); Set(varCurrentItemID, IDValue.Text); Set(varCurrentItemTitle, TitleValue.Text)
Visible	SharePointForm1.Mode = 2 && !varShowInterest

 
Note
We want the Show Interest button and the 2^nd tab to be visible only when the Job Postings form is opened in “View” mode.
 
9. Now, in order to create tabs, add another button and set the properties as follows,
   
   

Property Name	Value
Text	Job Postings
X	0
Y	0
Width	120
Height	40
RadiusTopLeft	15
RadiusTopRight	15
DisplayMode	If(varShowInterest, Edit, Disabled)



10. Similarly, create one more button with following properties
    
    

Property Name	Value
Text	Job Applications
X	125
Y	0
Width	120
Height	40
RadiusTopLeft	15
RadiusTopRight	15
Visible	varShowInterest
DisplayMode	Disabled



11. Now, it’s time to add another form, in the same PowerApps. In the menu, click on Insert -> Forms -> Edit
    
    
12. In the DataSource, expand Connectors and click on SharePoint. Choose “Job Applications” list as the data source.
    
    
13. In order to make it easier to work, for now, set the Visible property of SharePointForm1 to False. We will come back and set the property value correctly later.
    
    
14. Similar to SharePointForm1, set the Height of the Form1 to 750 and Y position to 40.
    
    
15. Select the Title Data Card and Unlock the properties from Advanced Tab. Set the properties as follows
    
    

Property Name	Value
DisplayName	Applicant Name
Default	User().FullName

16. Now is the important part of setting the default value of “Job ID” based on the current item selected in the Job Postings list. This is where the Parent-Child Relationship between the form will be established.
    
    
17. In order to do so, select the Job ID Data Card and Unlock the properties. Set the properties as follows

Property Name	Value
DisplayMode	DisplayMode.View
Default	{ '@odata.type' : "#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference", Id: varCurrentItemID, Value:varCurrentItemTitle }

Earlier in this article, we had set the variables for Current Item Id and Title by passing the values from Title and ID Controls. Since, Job ID field is a Lookup column to Job Postings list, it will need an entry as a record. In order to be able to set a default value, we set the ID and Value properties of lookup field to the ID and Title of the current item from Job Postings form.

18. Set the Default Mode of Form1 to New. This will be required, since we will be creating only new entries through this form and no Edits will be done through this form.
    
    
 
19. Finally, let’s add a button that will submit this form to Job Applications list. So, add a button and set the properties as follows,
    
    

Property Name	Value
Text	Submit
X	0
Y	600
Width	120
Height	40
OnSelect	SubmitForm(Form1);
Visible	varShowInterest

Now, let’s set the Visible property of both the forms appropriately, so that they are visible only when needed. So for SharePointForm1 (associated with Job Postings), set Visible to ‘!varShowInterest’ and for Form1 (associated with Job Applications), set Visible to ‘varShowInterest’.


One last thing that we need to do before we publish the App to SharePoint is setting a default value for the variable, so that when the form loads, it will show only the Job Postings form and not the Job Application form. In order to do so, click on the SharePointIntegration node in the Tree View.


In the Properties pane of SharePointIntegration, click on Advanced and update the properties as follows,



Property Name	Value
OnNew	Set(varShowInterest, false); NewForm(SharePointForm1)
OnEdit	Set(varShowInterest, false); EditForm(SharePointForm1)
OnView	Set(varShowInterest, false); ViewForm(SharePointForm1)

Lastly, Save and Publish the form to SharePoint.

 

Final Outcome

 

Final Outcome of the form should be that the ‘Show Interest’ button should not be visible on the New and Edit screen from SharePoint list. When you click on ‘Show Interest’ button in View form, it should switch to “Job Applications” tab. Users should be able to fill, the form, upload attachment and click on “Submit” to create an entry in “Job Applications” list. I have made some additional property updates for Form and Button colors that are not covered in this article. Hence, my final outcome would look a little different from yours.

 

 

Hope this article gave you something new to learn, it definitely was fun working on it and sharing it with you all. In my next article, I will extend this application with PowerAutomate that will send an email to Job Poster regarding the interest shown by an applicant.