Form Field Background Color

[Joshua Rush]

Hello,

I am looking for a way to alter the background color for all form fields on a form on load. Also, when a form field is in focus, change the background color and border attributes of that form field in focus.  

Josh

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can customize the background color of the form fields by utilizing the "UpdateFormFields()" function within the "formFieldClick()" event and the "formFieldFocusOut()" event as needed. Below, we've included a sample demonstrating how to modify the background color of form fields. If you have any further questions, feel free to reach out to us for assistance.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mvc_Sample-489244094.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

That helped me a lot thank you.

I had another question, let me know if you would rather me start a new forum. I am wanting to use the signature button within the Add/Edit form fields tool bar. Can I add this icon to the toolbar by itself? I dont need any other toolbar options in the Add/Edit toolbar, just the signature icon. Preferably I just add it to the standard toolbar and dont require the user to click the "Add/Edit Form Fields" icon

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can achieve this by utilizing the custom toolbar support to include the necessary toolbar item. We have included custom toolbar demos and documentation below for your reference

Custom Toolbar Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/how-to/toolbar-customization

Customize Toolbar item: https://ej2.syncfusion.com/aspnetmvc/documentation/pdfviewer/how-to/toolbar-icon-customization
 
Demos: https://ej2.syncfusion.com/aspnetmvc/PdfViewer/CustomToolbar#/material3 

Regards,
Sathiyaseelan K

[Joshua Rush]

Awesome thank you, that is great info.

Last question for me (for now :)) I am loading a PDF document that has a button in it, this is what it looks like when I open with microsoft edge:



when I open the same PDF using syncfusions pdfviewer, the button does not appear and there is no element in the DOM for this button. this is what the form looks like:



can syncfusions pdfviewer render button form components?

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We have branched a separate forum for the reported issue (#F187238). Kindly follow this forum for further updates.

Regards,
Sathiyaseelan K

[Joshua Rush]

Looping back to changing the background color of a selected form field, I have an inquiry about doing this with a read only text box.

Here is my scenario: I want the user to be able to click the text box and know that it has been selected, even though they cannot type in the field.. When the user selects this text box, im going to enable a button in the pdfviewer. THe provided code example doesnt seem to work on read only text boxes, the styling is not impacted when clicked. 

A read only text box may not be the best way to go about this, that would be my ideal choice. Do you have any suggestions? 

Thanks

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We will not enable form field selection in read-only mode as it is the default behavior. We have confirmed this behavior in Adobe as well, so we are unable to provide support for enabling form field selection in read-only mode.

Regards,
Sathiyaseelan K

[Joshua Rush]

Is there a way to mimic read only behavior in a text box without making the text box read only? For example, a user selects a text box but inputting values is disabled? Or their cursor cannot focus within the textbox? 

I need to have a field that the user can select but not modify the contents of. So when they click the field, I can change the styling of the field so the user knows they selected that field, but not allow them to modify the field. A button would have worked for this, but since the PDFViewer cannot render button form components, I need to find another solution!

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can achieve this by obtaining the form field using its ID and then modifying the style as needed within the FormFieldClick() event. Here's a code snippet to demonstrate:

Code Snippet

function formFieldClicked(args) {

    document.getElementById(args.field.id).style.borderColor = "blue";

    document.getElementById(args.field.id).style.backgroundColor = "yellow";

}

Regards,

Sathiyaseelan K

[Joshua Rush]

Is there a way to alter the form fields styling before they are rendered in the form? I am using the UpdateFormFields() function on documentLoad to update all of the form fields to the same styling, but this seems to have a significant impact on speed and performance. Can I set the styling attributes of all of the form fields before the document and its form fields are fully rendered? So the form fields will be rendered with the styling changes I want, not updating them after initial load. 

Or do you have some global setting to highlight all form fields? 

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

Currently, there is no direct support for setting the style for the form field directly. However, we will explore the possibility and provide you with more details on Monday.

Regards,
Sathiyaseelan K

[Joshua Rush]

Okay thank you. I recently upgraded to the latest version and installed the EJ2 DLLs (was still using EJ) and the form fields used to be highlighted on load so the user knew what fields were editable. Would definitely like for that to be a feature.

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We have logged "Support to customize form field style on load" it has a feature request. This feature will be included in one of the upcoming releases. This is because we have planned various features and improvements in our roadmap. We will inform you once this feature is implemented. You can track the status of the feature from the following feedback link.

Feature Feedback: Support to customize form field style on load | Feature Feedback 

Regards,
Sathiyaseelan K

[Sathiyaseelan Kannigaraj]

Hi Josha Rush,

To achieve this scenario, you can use the individual form field settings to set the style by default before the document loads. We have provided a code snippet for your reference. However, we have observed that it is not functioning correctly in the latest package. There might be an issue with the execution. We will further investigate this issue and provide you with more details within two business days.

Code Snippet:

@{

    PdfViewerTextFieldSettings textFieldSettings = new PdfViewerTextFieldSettings

    {

        Value = "Loaded",

        Color = "black",

        BorderColor = "red",

        BackgroundColor = "blue"

    };

}

<div>

    <div style="height:500px;width:100%;">

        @Html.EJS().PdfViewer("pdfviewer").ServiceUrl(VirtualPathUtility.ToAbsolute("~/Home/")).TextFieldSettings(textFieldSettings).DocumentPath("https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf").Render()

 

    </div>

</div>

Regards,

Sathiyaseelan K

[Joshua Rush]

Thank you!

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We'll provide further updates on this issue on Monday.

Regards,
Sathiyaseelan K

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

Apologies for any inconvenience caused. We are currently prioritizing the validation of this issue and will provide further update on April 17th, 2024.

Regards,
Sathiyaseelan K

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

You can update the style of form fields by utilizing the required form field settings after appending the PDF Viewer control to the DOM element. We have provided the code snippet and sample for your reference.
​

Code Snippet:

$(document).ready(function () {

       var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];

       pdfViewer.textFieldSettings = {

           value: "loaded",

           color: "#FF0000",

           borderColor: "#00FF00",

           backgroundColor: "#0000FF"

       }

   });

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Mvc_Sample1509074583.zip 

Regards,
Sathiyaseelan K

[Joshua Rush]

perfect thank you! 

[Sathiyaseelan Kannigaraj]

Hi Joshua Rush,

We're pleased to hear that your issue has been resolved. Don't hesitate to reach out if you need any further assistance.

Regards,
Sathiyaseelan K