Developing Drawing App In Microsoft PowerApps

Before reading this article, please go through the 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 Use Common Data Model(CDM)
• To Get User Details
• Developing Camera App

In PowerApps, we can develop the drawing app, using Pen Input Control.

Pen Input Control

Pen Input Control is used to draw, erase, and highlight the areas in the image. It's an input interface to get the user's handwriting and convert it into the images.

Here, we are developing the drawing app, using Pen Input Control, and saving those drawing images to the image gallery;  we can also delete them from the image gallery.

Follow the steps, mentioned below to develop the drawing app in PowerApps.

Step 1

Log into PowerApps

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



Step 2 Create a New App in PowerApp

After login, we can see the dashboard. Subsequently, 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 to add our data. On right side, we see the list of layouts. In the top, we see the formula bar. Subsequently, you will see the Properties of the screen, which you will select. In the right side, we will see the Add DataSource to add the external DataSource.



Step 5 Drag and Drop the Pen Input Control

1. Go to the Insert menu. Afterwards, control and drag the Pen Input tool.
   
   
   
   
2. Drop the Pen Input tool on the screen.
   
   
   
   
3. Rename the MyPen.
   
   

Step 7

Drag and Drop the Button Control Tool

Button control is used to save the drawing to the image gallery.

1. Go to the Insert menu and drag the Button control.
   
   
   
   
2. Drag the Button control to the screen.
   
   Place it in the screen and change the name to save it.
   
   
   
   
3. Add the Coding
   
   Now, select the Button control and add the coding to the OnSelect event.

Coding

Collect(ImageSave, {SketchMyPen.Image})



Step 7

Drag and drop the Image Gallery Control Tool

The Image Gallery control is used to save the drawing.

1. Go to the Insert menu and drag the vertical image only control.
   
   
   
   
2. Drag the Image Gallery control to the screen.
   
   
   
   
3. Add the Coding
   
   First, select the image and add the ImageSave to the Items event.
   
    

Select the individual image and add the following coding to the OnSelect event

Coding

Remove (ImageSave, ThisItem)

Step 8

Run the app.



Output 1's Main Screen



Output 2

Sketch it and tap save.

Output 3

It is saved into the ImageGallery.



Output 4

Now, sketch and save.



Output 5 is saved



Output 6

Select and remove it.



Output 7 Removed



Conclusion

I hope, you understood how to develop the drawing app in Microsoft PowerApps and how to run it.