Making Graphics Effect Using Shape Control In Microsoft PowerApps

Before reading this article, please go through some of the important articles mentioned below.

• Quick Start on Microsoft PowerApps
• To Use Template
• To Use Blank App
• To Add an Excel File
• To Use Sort And SortByColumn Functions
• To Use Filter, Search, And Lookup Functions
• To Add Contacts
• To Get User Details
• Developing Camera App
• Using Radio Button
• Developing Drawing App
• Using ListBox Control
• Adding Audio And Video Control
• Using Slider Control
• Import And Export Data In Microsoft PowerApps

In PowerApps, we can make the graphic effect by using Shape Control.

Shape Control

These controls include arrows, geometric shapes, action icons, and symbols for which you can configure properties such as fill, size, and location. You can also configure their On Select property so that the app responds if the user clicks or taps the control. Shape control provides an easy way to draw rectangles, circles, and other shapes on the screen.

Follow the below steps to work with Shape Control to make the Graphics Effect in PowerApps.

Step 1. Log into the PowerApps.

After downloading the PowerApps from the Windows Store, here, we need a Microsoft-related organization’s Office 365 ID (MSDN, Microsoft, Skype, Office 365, etc.,), to log in with.

Step 2. Create a New App in PowerApp.

After Login, we can see the Dashboard. There, we click on the New button.

Step 3. Choose the Blank app.

Step 4. Designing the App.

Now, let's start designing the app. On the left side, we can see the Individual Screens for adding our data. On the right side, we see the list of layouts. At the Top, we see the formula bar. There, you see the Properties of the screen that you select. On the right side, we see the Add Data Source to add the External Data Source.

Step 5. Add the Controls to the Screen1.

1. Select the Screen and change the screen name to Target.
   
2. Go to the Insert menu >> Controls and drag the Text Box control.
   
3. Drop the Text Box on the Screen and enter the text as Source Screen.
   
4. Go to the Insert menu, choose Icons, and Drag the 6-point star control.
   
5. Drop the Control on the screen.
   
6. Add the Options
7. Select the Shape Control and Add the following coding to the OnSelect Property.
8. Coding Navigate(source, ScreenTransition.Fade)
   

Step 6. Add the Controls to the Screen 2.

1. Go to the Inset Menu and add the New Screen.
   
2. Select the Screen and Change the screen name as the source.
   
3. Go to the Insert menu, then Controls, and Drag the Text Box control.
   
4. Drop the Text Box on the Screen and Enter the text as Destination Screen.
   
5. Go to the Insert menu choose Icons and Drag the 8-point star control.
   
6. Drop the Control on the screen
   
7. Add the Options.
8. Select the Shape Control and add the following coding to the OnSelect Property.
9. Coding Navigate(Target, ScreenTransition.Fade).
   

Step 7. Run the App.

Output 1. Main Screen.

Output 2. Click on the 6-Star button.

Output 3. It will open Next Screen and Click on the 8-Star button.

Output 4. It will open the First Screen.

Conclusion

I hope you understood how to make the graphics effect by adding Shape Control in Microsoft PowerApps and how to run it.