P – Pen Input – How to check if blank!

Introduction

Pen input control is a pretty fancy one where a user can use their fingers, or a stylus to draw, write, or sign directly on the mobile device screen. A lot of times, there is a need to check if its blank or not. For example, you might want to disable a submit button until the user has signed a form. It is pretty straightforward to check if a control is blank or not. Here are a few examples:

IsBlank(txtInput.Text)

IsBlank(cmbInput.Selected.Value)

Check if a pen input control is blank

However, this doesn't work for the pen input control. The following code always returns false even when there is nothing drawn/written:

If(
    IsBlank(PenInput1.Image),
    DisplayMode.Edit,
    DisplayMode.Disabled
)

Follow these steps to make it work:

1. Set the OnVisible property of the screen to:

   Reset(PenInput1);
   Set(
       varInitialPenInput,
       PenInput1.Image
   );
   Set(
       varPenInput,
       PenInput1.Image
   )

2. For the X icon, set its OnSelect property to:

   Reset(PenInput1)

3. Set the OnSelect property of the pen input control to:

   Set(
       varPenInput,
       PenInput1.Image
   )

5. Finally, set its DisplayMode property to:

   If(
       varInitialPenInput <> varPenInput,
       If(
           varPenInput = PenInput1.Image,
           DisplayMode.Edit,
           DisplayMode.Disabled
       ),
       DisplayMode.Disabled
   )

Here is a quick demo:

To learn more about the IsBlank function, click here.

Stay tuned for the remaining 10 tips!

Recent articles

• O – Offline for model-driven apps! How to configure it?
• N – Navigation on Android – Learn how to simplify!
• M – Model-driven apps – How to add them to Teams?