How to Update DataCard Value in Power Apps

In this Power Apps Tutorial, We will discuss how to update a Data Card value in Power Apps.

Recently, I was working with a requirement where I need to update the Power Apps DataCard value. To achieve this need, we will follow the below instructions.

Furthermore, we will see how to update a DataCard value with a button control in Power Apps.

How to update a Data Card value within the Power Apps?

This section will demonstrate how to update a data card value within Power Apps.

Requirement:

When the user opens the Power Apps form, it will display the name of the currently logged-in user in the EmployeeName DataCard. Similarly, the manager data card will display the name of the respective employee’s manager.

Additionally, when the user changes the employee’s name on the Employee Name DataCard, the Manager Data Card value will change accordingly.

Change a Power Apps data card field values
Change a Power Apps data card field values

Here, we have a SharePoint list named “Employees.” This list has several columns with different data types. Such as:

  1. Employee Name = People Type column
  2. Address = Single Line Text
  3. Contact = Number
  4. Join Date = Date type column
  5. Department = Choice columns (i.e., IT, Finance, HR, Manager)
  6. Manager = Single-line text
How to update PowerApps Data Card value
How to update PowerApps Data Card value

To fulfill the requirement, now we will create a customized Power Apps form (i.e., an employee registration form) using the above-mentioned SharePoint list (Employees).

To create a customized form within the Power Apps, the following steps are required:

  • On the specified SharePoint list, navigate to Integrate (on the top bar).
  • Go to Power Apps.
  • Select Customized forms.
Create customize form from the SharePoint list
Create customize form from the SharePoint list
  • After a while, you can see a Power Apps customized form within the Canvas apps. Where the customized form contains the SharePoint list (Employees) as the data source.
DataSource = [@Employees]
PowerApps update data card value
PowerApps update data card value
  • At first, we need to display all of the employees’ names within the Employee Name DataCard. For this, we need to connect the app with the Office365Users connector.
How to update data card value in PowerApps
How to update data card value in PowerApps
  • Once it’s connected to the app, add the following expression to the Items property of the Employee Name DataCard. As a result, the dropdown control will display a list of all users.
Items = Office365Users.SearchUser()
How to update a data card value on Power Apps
How to update a data card value on Power Apps
  • But we want the logged-in user’s name should be displayed as the default value. When the currently logged-in user will open the Power Apps customized form, he/she can be able to view his/her name inside the Employee Name Data Card.
  • Select the Employee name field and set its DefaultSelectedItems property as:
DefaultSelectedItems = Office365Users.MyProfile()

Where MyProfile() retrieves the currently logged-in user name (in our case it is Sonam Subhadarsini is the Current logged-in user).

Update DataCard value within the Power Apps
Update DataCard value within the Power Apps
  • Now, we will update the manager DataCard value based on the current user name. For this, select the Manager DataCard and unlock it to change the properties.
  • Insert the below expression on the Default property of the Manager Field.
Default = Office365Users.Manager(DataCardValue2.Selected.Mail).DisplayName

Where DataCardValue2 refers to the DataCard value of the EmployeeName. Once the formula is applied, we can see the respective manager’s name (of the current user) will display in the Datacard as shown below:

Update Power Apps DataCard value
Update Power Apps DataCard value

Similarly, if we change the employee name, the manager data card value will be automatically changed and display the updated respective manager’s name.

Suppose I am going to change the employee name to another user (i.e., Arvind Vaishnavi). At that moment, we can view the respective employee manager’s name, which will display in the Manager field (i.e., Shivam Dogra).

How to Update PowerApps DataCard value
How to Update PowerApps DataCard value

This is how to update the PowerApps DataCard value.

Read How to get month name from date in Power Apps

Power Apps update Datacard value with a button

In this section, we will see how to update a Power Apps data card value with a button.

Requirement:

When the user selects the checkbox control, the permanent address value is updated to the current address field. Similarly, unchecking the checkbox control removes the updated value from the current address field.

Additionally, there is a button control inside the Power Apps customized form to submit the data from the Power Apps to the specified SharePoint list.

Power Apps update Data card value with a button
Power Apps update Data card value with a button

Here, we have a SharePoint list named “Voters.” This list has several columns with different data types. Such as:

  • Voter Name: Single-line text
  • Date Of Birth: Date and time
  • Applied Date: Date and time
  • Permanent Address: Multi-line text
  • Current Address: Multi-line text
PowerApps update Data card value with a button
PowerApps update Data card value with a button

To fulfill the requirement, now we will create a customized Power Apps form (i.e., Voter Details) using the above-mentioned SharePoint list (Voters).

To create a customized form within the Power Apps, the following steps are required:

  • On the specified SharePoint list, navigate to Integrate (on the top bar).
  • Go to Power Apps.
  • Select Customized forms.
PowerApps updates the Datacard value with a button
PowerApps updates the Datacard value with a button
  • After a while, you can see a Power Apps customized form within the Canvas apps. Where the customized form contains the SharePoint list (Voters) as the data source.
DataSource = [@Voters]
Update data card in Power Apps
Update data card in Power Apps
  • To update the data card value, first, we’ll set the UpdateContext variable on the Power Apps screen’s OnVisible property. Set the value of the variable to the current value of the field to be updated.
OnVisible = Set(VarAddress, SharePointIntegration.Selected.'Current Address');
UpdateContext({VarAddress: SharePointIntegration.Selected.'Current Address'})

Where VarAddress is the name of the update context and “Current Address” is the name of the field that is to be updated,

Button to update Power Apps Data Card Value 1
Button to update Power Apps Data Card Value
  • Update the UpdateContext Variable on the Default property of the DataCard that we want to update i.e., Current Address Data Card.

Note:

Make sure to implement this in the data card’s data value field (text box), not the data card itself.
Default = VarAddress
Change a Power Apps Datacard fields value with a button 1
Change a Power Apps Datacard fields value with a button
  • Next, add a check box control to the Power Apps form and give a text to the check box control.
Text = "Permanent address is same as current address"
Update the data card value in Power Apps
Update the data card value in Power Apps
  • Insert the following expression into the OnCheck property of the Power Apps checkbox control. When it checks, it will move the inserted value from one field to another (i.e., Permanent address field to current address field).
OnCheck= UpdateContext({VarAddress:DataCardValue9.Text});

where DataCardValue9 is the name of the Permanent Address’s data card value.

Update data card value in Power Apps
Update data card value in Power Apps
  • Similarly, add the following expression to the checkbox’s OnUncheck property to remove the data from the Current address when the checkbox control is unchecked.
OnUncheck = UpdateContext({VarAddress:Blank()});
Change a Power Apps datacard field values based on check box control
Change a Power Apps datacard field values based on check box control
  • To submit the data from the Power Apps form to the SharePoint list, add a button control to the form and give a name to the button as Submit.
  • Insert the below expression on the button’s OnSelect property.
OnSelect = SubmitForm(SharePointForm1)

where SharePointForm1 is the name of the customized form that built from the sharepoint list.

Submit data from the Power Apps to SharePoint list via button
Submit data from the Power Apps to SharePoint list via button

That’s it! Let’s insert data on the data cards, and check the checkbox control. We can see that it will update the value from the permanent address to the current address. Similarly, if we uncheck the checkbox, then it will remove the data from the current address field.

Update data card value in Power Apps via button
Update data card value in Power Apps via button

Once we clicked on the button, the data will save on the SharePoint list as shown below:

Power Apps update data card value via button
Power Apps update data card value via button

This is how to use the button to update the PowerApps Datacard value.

Conclusion

From the Power Apps tutorial, we learned below topics such as:

  • Update the DataCard value within the Power Apps
  • Update PowerApps Datacard Value from Button

You may like the following power apps tutorials:

>