Making Graphics Effect Using Shape Control In Microsoft PowerApps

Before reading this article, please go through some of these important articles mentioned below -

• Quick Start on Microsoft PowerApps
• To Use Template
• To Use Blank App
• To Add 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 for making 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 or (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. In the left side, we can see the Individual Screens for adding our data. In the right side, we see the list of layouts. In the Top, we see the formula bar. There, you see the Properties of the screen that you select. In 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 6-point star control.
   
   
   
   
5. Drop the Control on the screen.
   
   
   
   
6. Add the Options
   Select the Shape Control and Add the following coding to the OnSelect Property.
   
   Coding Navigate(source, ScreenTransition.Fade)
   
   
   

Step 6 Add the Controls to the Screen2

1. Go to the Inset Menu and add the New Screen
   
   
   
   
2. Select the Screen and Change the screen name as 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 and choose Icons and Drag the 8-point star control.
   
   
   
   
6. Drop the Control on the screen
   
   
   
   
7. Add the Options
   Select the Shape Control and add the following coding to the OnSelect Property.
   
   Coding Navigate(Target, ScreenTransition.Fade)
   
   
   

Step 8

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 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.