Express Design in Power Apps is a new feature that allows you to quickly create Power Apps by transforming your visual designs or sketches into functional apps. Whether you have paper forms, whiteboard sketches, or Figma files, you can use Express Design to convert these design artifacts into working apps.
With the Image to App tool, upload an image of your wireframe or design, and follow the guided steps to tag components and connect your data.
Firstly, create a sample sketch of a simple form using the Paint tool and save it.
Next, log in to Power Apps.
Select Create from the Navigation menu and click on Image.
Go through the guidelines and click Next.
Under Image, select Upload my own option and upload the paint file that we just created.
Select the format as Tablet and Click Next.
After uploading your design, you will find that all the objects in your image are already tagged or mapped by Power Apps. For example, in the image, "Student Name" is tagged as a text label in orange, and the green box corresponding to it is its text input.
If you want to change a component’s tag, click on it and select the appropriate option from the list.
Once the correct mapping is done, click Next.
The next step is to set up the data. Here, you can either connect the app to a data table or skip this step if you're unsure whether you need data. Select "Connect to a Dataverse Table" and click "Next."
Here, you can connect the app to your data by creating a new table or selecting an existing table.
Select the component in the app designer to change the datatype of the fields. For example, the "Admission Date" field can be set to either a text or date data type, so adjust it according to your requirements.
The highlighted fields in blue indicate that users can tag fields in a form to match columns and data types. For example, the "Student Name" field is surrounded by a blue box, indicating that it is already tagged.
On the right side, you can see the "Student name" and other columns listed with their display names and data types ("Text"). This means any data entered in the "Student name" field will be stored as text in the database.
This tagging links the form fields to the correct columns in the database, ensuring that data is stored properly. If you need to change the tag, you can click on the "Student Name" field and select the appropriate option from the list.
After the necessary tagging has been completed, click the "Next" button.
Review the screen and components, and if everything seems good, click on Create.
The screen will be added to the app.
Next, let’s set up the SUBMIT button. At the top of the screen, you'll see the OnSelect property. This controls what happens when you click the button.
The formula set for OnSelect is SubmitForm(Form1); ResetForm(Form1), which means:
SubmitForm(Form1): Submits the data filled in the form.
ResetForm(Form1): Resets the form to its default state after submission.
Click on the play button to test the app.
Insert some test data and click on the Submit button to submit the form.
Go to Power apps, in the Tables look for the table we have created to save form data and open the table.
In the table, we can see the data is being saved.
Express Design in Power Apps simplifies app creation by converting your visual designs or sketches into functional applications. By following the above steps, using the Image to App tool, you can easily tag components, connect to data sources, and create apps quickly, even with minimal coding experience.
Frequently Asked Questions (FAQs):
1. What is Express Design in Power Apps?
Express Design is a feature in Power Apps that converts visual designs, like sketches or Figma files, into functional apps.
2. What formats are supported for the Image to App tool?
You can upload images of your wireframes or designs in various formats such as sketches, paper forms, or digital design files.
3. What does the tagging process involve?
Tagging involves mapping components in your design to corresponding data fields, ensuring accurate data entry.
4. Where can I see the submitted data?
Go to Power Apps, search for the table you created, and open it to see the saved data entries.
