Model App Pen Input image box

[NewcombR]

Hello,

I have a model-driven app that contains a custom entity (“MyEntity”). The custom entity has a custom multiple lines of text field (“new_signature”). The form has the pen input component control. When a new record is created in the model app, the pen input control allows for the user to input their signature. Signatures entered in the model app are captured and displayed perfectly.

I need to extend this to a canvas app to support mobility and other business requirements.

I have a canvas app that connects to the custom entity. I have created a screen (“Screen1”) that contains a pen input control (“PenInput1”), and a submit button (“Button1”). When the user clicks the submit button, I use the JSON function to convert the image into a base64 string, and then the Patch function to create the record in CDS.

In the canvas app, I have another screen (“Screen2”) that displays the record from the CDS custom entity. I have an image control that displays the signature, converting the “new_signature” text into an image. This displays signatures entered from the canvas app perfectly and signatures entered from the model-app perfectly. So, the data is being stored properly and is working as expected when viewing records in the canvas app.

Problem:
Signatures entered from the canvas app appear cropped/do not display correctly in the model-driven app. It appears that the image box for the Model-driven pen input control doesn’t have a “Fit” image property.

Am I missing something? How can I have the signatures captured in the canvas app display in the model-app’s pen input control scaled to fit?

[v-xida-msft]

Hi @NewcombR ,

Which type column do you use to store the Pen Input Image in your CDS Entity? Image Type column or just Text type column?

Do you mean that the captured image data within your canvas app could not be displayed properly within your Model-Driven app?

Based on the needs that you mentioned, I have made a test on my side, and don't have the issue that you mentioned. The Pen Input image captured within my canvas app could be displayed properly within my Model-Driven app form.

Please make sure that you saved the base64 encoded data of the image from your canvas app back to your CDS Entity. The base64 encoded data format should be like below:

data:image/png;base64...

You could consider enable the "Automatically expand to use available space" option for the Pen Input control as below:

then check if the issue is solved.

Best regards,

[NewcombR]

This is the code that I'm using on the "OnSelect" property of a Submit Button to convert the PenInput control on the canvas app into an imagedata.

UpdateContext(
    {
        varPenPre: JSON(
            inpEmployeeSignature.Image,
            JSONFormat.IncludeBinaryData
        )
    }
);


UpdateContext(
    {
        varPen: Mid(
            varPenPre,
            2,
            Len(varPenPre) - 2
        )
    }
);


Patch(
        [@myCustomEntity],
        Defaults([@'myCustomEntity']),
        {
            'Employee Signature': varPen
        }
)

The CDS Field is set as a Multiline Text with 15,000 characters.  On the form, I have the field configured to automatically use the available space as you mentioned.

When I view the record in the CDS Model driven App, the Pen Input control doesn't display the image correctly.  The image appears to be cropped, as if the box isn't scaling the image to fit inside.  I think that there is not a way to set the Model-driven App's "Pen Input" viewbox to Scale to "Fit"?

If I create a canvas app, though, and add an Image control on it and configure the image to display the image from the CDS record, I can see the entire image perfectly.  For example, insert a gallery on a canvas app.  Insert an Image control on the screen.  Set the image control to Gallery1.Selected.'Signature Field'.

[v-xida-msft]

Hi @NewcombR ,

Currently, I could not reproduce your issue on my side. Please consider modify your formula as below (without UpdateContext function😞

Patch(
        [@myCustomEntity],
        Defaults([@'myCustomEntity']),
        {
            'Employee Signature': Substitute( 
                                    JSON(inpEmployeeSignature.Image,JSONFormat.IncludeBinaryData),
                                             """",
                                             ""
                                  )
        }
)

Please edit your Entity Form in classic experience mode, then select the Pen Input control field, edit its properties as below:

Best regards,

[NewcombR]

@v-xida-msft  -

I have made the changes you suggested, but the problem still occurs. 

Only about 2/3 of the image captured on the canvas app displays on the model-driven app's form.  The missing 1/3 is from the right side of the image.

In the canvas app, draw an "X" or similar shape in all 4 corners of the Pen Input control then submit the record.

In the model-driven app, open to the record that was created and check to see if all 4 of the corners are showing.

On mine, the top right and bottom right of the image is missing.  (Basically, about 1/3 of the entire width of the image is missing).

[NewcombR]

We’re you able to replicate this? I am still having this issue.

[NewcombR]

For what it’s worth, I was never able to get this to work properly. It seems that the pen control component on the model driven app isn’t set to a “fit” scale and there doesn’t appear to be a way to fix that without changing the component (which is first party and therefore I can’t). I ended up using an embedded canvas app on the model-driven form that contains an image control. The image control is set to the multiline text field data on the record. Works great!