Making Graphics Effect Using Shape Control In Microsoft PowerApps

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

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.

PowerApps

Step 2 Create a New App in PowerApp

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

PowerApps

Step 3

Choose the Blank app.

PowerApps

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.

PowerApps

Step 5 Add the Controls to the Screen1

  1. Select the Screen and change the screen name to Target.

    PowerApps

  2. Go to the Insert menu >> Controls and drag the Text Box control.

    PowerApps

  3. Drop the Text Box on the Screen and enter the text as Source Screen.

    PowerApps

  4. Go to the Insert menu, choose Icons, and Drag 6-point star control.

    PowerApps

  5. Drop the Control on the screen.

    PowerApps

  6. Add the Options
    Select the Shape Control and Add the following coding to the OnSelect Property.

    Coding Navigate(source, ScreenTransition.Fade)

    PowerApps

Step 6 Add the Controls to the Screen2

  1. Go to the Inset Menu and add the New Screen

    PowerApps

  2. Select the Screen and Change the screen name as source

    PowerApps

  3. Go to the Insert menu, then Controls, and Drag the Text Box control.

    PowerApps

  4. Drop the Text Box on the Screen and Enter the text as Destination Screen

    PowerApps

  5. Go to the Insert menu and choose Icons and Drag the 8-point star control.

    PowerApps

  6. Drop the Control on the screen

    PowerApps

  7. Add the Options
    Select the Shape Control and add the following coding to the OnSelect Property.

    Coding Navigate(Target, ScreenTransition.Fade)

    PowerApps

Step 8

Run the App

PowerApps

Output 1

Main Screen

PowerApps

Output 2

Click on the 6-Star button.

PowerApps

Output 3

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

PowerApps

Output 4

It will open First Screen.

PowerApps

Conclusion

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