Make a field focus and required dynamically in PowerApps

 

This tutorial will we learn how to improve user experience with SetFocus and make field as required in Power App.

SetFocus() function in Power Apps

The SetFocus is used to move an input focus to specific control. the users Keystrokes are the received by that control allowing them to enter text in that input control.

When should we use SetFocus function?

User can use SetFocus function for the below application.

·       When a screen is displayed to focus the first input control with onvisible property of the screen.

·       Newly exposed control or enabled input control to guide the user that what comes next to enter data faster.

Limitations for SetFocus function:

This function can be used for controls.

Text input control

Image control

Label Control

Icon Control

Button control

 

Syntax

 

SetFocus(Control)

The SetFocus function gives a control the input focus.

 

Implementing SetFocus function in Canvas app

 

In our scenario we are adding SetFocus control and making Field as required during the “Onchange” property of input toggle control.

 

This will dynamically focus the required control and make field as required as per the user input.

 

If(employee_info.Value=true,SetFocus(DataCardValue2))

We are writing above Power FX formula on “Onchange” property of  toggle control, when a toggle is turned on the employee id field will be focus and marked as required.


Please below screen shorts of canvas apps.



To make field has required we are writing below formula on field required property.

employee_info.Value=true



Final screen:

 

We have turned employee toggle on in below screen, you can notices that employee Id field is focused and its required.












Comments

Post a Comment

Popular posts from this blog

How to implement approval in Teams using Adaptive Cards

Image
  Adaptive Cards are self-contained user interface components that transcend platform boundaries. Crafted in JSON format, these snippets of UI can be seamlessly exchanged between applications. Upon reaching a particular application, the JSON content is dynamically rendered into native UI elements, seamlessly blending with the app's aesthetic. This approach facilitates the creation and seamless integration of lightweight UI elements across diverse platforms and frameworks. User Story: We're preparing to implement a leave approval workflow in Teams utilizing adaptive cards. Employees will submit their leave requests, and line managers will receive notifications within Teams. Step 1 – Design the Adaptive Card Prior to establishing the flow, let's initiate the card design process using the designer tool to ensure readiness. Visit https://adaptivecards.io/designer/   to access the designer interface and adjust the 'host app' setting to Microsoft Teams – Light /...
Read more

Open canvas app with Customize the command bar using command designer

Image
  This topic guides you through creating and editing modern commands using the command designer and Power Fx. Create a new model-driven app using modern app designer 1.      Sign into  Power Apps 2.      On the left navigation pane, select  Solutions  and then open or create a solution to contain the new model-driven app. 3.      Select  New  >  App  >  Model-driven app 4.      Select  Modern app designer , and then select  Create .    Enter a  Name  for your app, and then select  Create . More information:  Create a model-driven app that has an account table page 1.      On the left navigation pane, select  Solutions , and then open the solution containing the existing model-driven app. 2.      Select the model-driven app, and then select --  >  Edit ...
Read more

HTTP Request Methods

Image
  1. 𝗚𝗘𝗧 : GET Method is used to request information from a website, Server or from API. Example: GET/api/employee/{employee-id}   2. 𝗣𝗢𝗦𝗧 : POST Method is used to create a new resource in server. We can send data to the server in the request body. Example: POST/api/employee/department   3. 𝗣𝗨𝗧 : PUT Method is used to update an existing record by sending the updated data as the content to request body to the server. Example: POST/api/employee/55445   4. 𝗗𝗘𝗟𝗘𝗧𝗘 : DELETE Method is used to remove resources from the server. Example: DELETE/api/employee/55445   5. 𝗣𝗔𝗧𝗖𝗛 : PATCH and PUT are similar use to updates a resource, but it will update data partially but not fully. Example: PATCH/api/employee/55445{"Name: Employee Name"}   6. 𝗛𝗘𝗔𝗗 : HEAD Method is like the GET but it doesn't have any response body. Example: HEAD/api/employee   7. 𝗢𝗣𝗧𝗜𝗢𝗡𝗦 : OPTIONS Method is used to get the informatio...
Read more

Create email templates in dynamic 365 and send email using Power Automate

Image
We can utilize email templates with Power Automate to send emails. Follow these steps to use email templates with Power Automate. ·         Create Email Template in dynamic 365. ·         Configure Power Automate to Email Template. Create Email Template in dynamic 365: Navigate to Power Platform admin center, navigate to the Environments tab, and select your environment you wish to create email template refer below screen short. Click on setting and look for Templets and click on Email Template. Click on new on tool bar. The Email Template Type dialog box will open. Select the desired entity and then click OK. On the template form, provide a name for your email template and, if desired, add a description. Note that the email template name and description will not be visible to the recipient. Enter the text you want to send in the message. Use the formatting toolbar to edit and style your...
Read more

Duplicate Detection in Dynamics 365 using power apps.

Image
  User Case: When setting up a contact in Dynamics 365, verify if a contact with the same email address already exists. If it does, prompt an error message indicating a duplicate email address. Step 1 :  Navigate to make.powerapps.com, screen 1 à Create a Blank Canvas App à Connect with Dynamics 365 Data Source à Connect Contact Entity as Dataset (You can connect other entity also as per your requirement) Step 2:   Screen 2 - Insert a new Blank Screen to show Duplicate Detection Dialog Step 3:   Add few Text Input and Button Controls in Screen 1 or design as per your need. Step 4:  Add below formula on Button Control (onSelect property) to find Duplicate Record. If ( IsBlank ( LookUp ( Contacts , emailaddress1 = Emailaddress_Text . Text )), UpdateContext ({ result: "Duplicates Record not found" }), Navigate ( DuplicateDetectionDailogbox , ScreenTransition . CoverRight ) ) ; You can use following formula also on Button Control (onSelect property...
Read more