1. Home
  2. Forum
  3. React - EJ 2
  4. Cannot open custom form fields properties

Cannot open custom form fields properties

So I created a very basic document editor,
and added buttons that inserts custom form fields


When I try to right click it
and click properties

I'm seeing this error in the browser logs:


Here's a sample code that I use, which is just very basic usage of syncfusion's document editor

import React, { FunctionComponent, ReactElement, useRef } from "react";
import {
DocumentEditorComponent,
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog,
TextFormFieldInfo,
CheckBoxFormFieldInfo,
DropDownFormFieldInfo,
} from "@syncfusion/ej2-react-documenteditor";
DocumentEditorComponent.Inject(
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog,
TextFormFieldInfo,
CheckBoxFormFieldInfo,
DropDownFormFieldInfo
);

const TestPage: FunctionComponent = (): ReactElement => {
const documentEditorRef = useRef<DocumentEditorComponent>(null);
const insertText = (): void => {
documentEditorRef.current!.editor.insertFormField("Text");
alert("hellow");
};

const insertCheckBox = (): void => {
documentEditorRef.current!.editor.insertFormField("CheckBox");
};

const insertDropdown = (): void => {
documentEditorRef.current!.editor.insertFormField("DropDown");
};

return (
<>
<div>
<button onClick={insertText}>Textbutton>
<button onClick={insertCheckBox}>CheckBoxbutton>
<button onClick={insertDropdown}>DropDownbutton>
div>
<DocumentEditorComponent
ref={documentEditorRef}
id="container"
height="830px"
serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
isReadOnly={false}
enablePrint={true}
enableSelection={true}
enableEditor={true}
enableEditorHistory={true}
enableContextMenu={true}
enableSearch={true}
enableOptionsPane={true}
enableBookmarkDialog={true}
enableBordersAndShadingDialog={true}
enableFontDialog={true}
enableTableDialog={true}
enableParagraphDialog={true}
enableHyperlinkDialog={true}
enableImageResizer={true}
enableListDialog={true}
enablePageSetupDialog={true}
enableSfdtExport={true}
enableStyleDialog={true}
enableTableOfContentsDialog={true}
enableTableOptionsDialog={true}
enableTablePropertiesDialog={true}
enableTextExport={true}
enableWordExport={true}
enableFormFields={true}
/>
);
};

export default TestPage;


Also when I tired calling this method: 

 documentEditorRef.current.editor.enforceProtection('123', 'FormFieldsOnly');


It shows me this error:


Here's the version I'm using:

"@syncfusion/ej2-base": "20.1.60",
"@syncfusion/ej2-buttons": "20.1.52",
"@syncfusion/ej2-dropdowns": "20.1.52",
"@syncfusion/ej2-inputs": "^20.1.61",
"@syncfusion/ej2-lists": "20.1.47",
"@syncfusion/ej2-navigations": "20.1.51",
"@syncfusion/ej2-popups": "20.1.47",
"@syncfusion/ej2-react-base": "^20.1.59",
"@syncfusion/ej2-react-documenteditor": "20.1.59",
"@syncfusion/ej2-react-inputs": "^20.1.61",
"@syncfusion/ej2-splitbuttons": "20.1.47",


Though when I tried it on your demo site, it works just fine


15 Replies 1 reply marked as answer
AE Ajithamarlin Edward Syncfusion Team July 15, 2022 05:05 AM UTC

HI Min,


We will check and update further details shortly.


Regards,

Ajithamarlin E


AE Ajithamarlin Edward Syncfusion Team July 18, 2022 05:14 AM UTC

Hi Min,

#Formfield issue

Please import and inject the below formfield dialogs in import and inject.


TextFormFieldDialog, CheckBoxFormFieldDialog, DropDownFormFieldDialog


Please add these dialogs in import and inject and let us know whether this resolved the issue at you end.


#Restrict editing issue:

Document editor needs serve side interaction for restrict editing. You have to deploy a webservice for server-client interaction

Please refer the below documentation to know more

https://ej2.syncfusion.com/react/documentation/document-editor/web-services/


https://ej2.syncfusion.com/react/documentation/document-editor/web-services/core/#restrict-editing


Please let us know if you need any further assistance.


Regards,

Ajithamarlin E


AK Ameer Khalaf July 24, 2022 11:49 PM UTC

Hi  Ajithamarlin Edward, the solution above works great! Thank You

My follow up question would be,


How do we customize the UI for dropdown and the textbox:


I want to be able to replace it using our own custom design
In your demo here, you were able to modify the UI for this.


AK Ameer Khalaf July 25, 2022 12:03 AM UTC

Hi Ajithamarlin Edward, another issue I found,

when I tried custom date inputs
it seems to be broken, and icon is not showing:





AE Ajithamarlin Edward Syncfusion Team July 26, 2022 04:36 AM UTC

Hi Min,


#Regarding I want to be able to replace it using our own custom design
In your demo here, you were able to modify the UI for this.


We are sorry to say that currently it is not possible to customize the form field dropdown and text box.


The one in our demo site was in Bootstrap theme, that is why it differs from your application, the theme in your application was material theme.


Graphical user interface, application Description automatically generated




#Regarding when I tried custom date inputs it seems to be broken, and icon is not showing:


Please share us your document editor version details and the customization coode to validate further.


Regards,


AK Ameer Khalaf July 26, 2022 05:34 AM UTC

Hi Ajithamarlin Edward,

Thanks I was able change the theme to bootstrap. But yeah it would have been nicer if we could have the ability to customized that UI.



Anyway here's the my simple source code regarding date not showing dates
let me know what I'm missing here.

    "@syncfusion/ej2-base": "20.1.60",
    "@syncfusion/ej2-buttons": "20.1.52",
    "@syncfusion/ej2-dropdowns": "20.1.52",
    "@syncfusion/ej2-inputs": "^20.1.61",
    "@syncfusion/ej2-lists": "20.1.47",
    "@syncfusion/ej2-navigations": "20.1.51",
    "@syncfusion/ej2-popups": "20.1.47",
    "@syncfusion/ej2-react-base": "^20.1.59",
    "@syncfusion/ej2-react-documenteditor": "20.1.59",
    "@syncfusion/ej2-react-inputs": "^20.1.61",
    "@syncfusion/ej2-splitbuttons": "20.1.47",


Thanks

import React, { FunctionComponent, ReactElement, useRef } from 'react';
import {
DocumentEditorComponent,
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog,
TextFormFieldDialog,
CheckBoxFormFieldDialog,
DropDownFormFieldDialog,
TextFormFieldInfo
} from '@syncfusion/ej2-react-documenteditor';

DocumentEditorComponent.Inject(
Print,
SfdtExport,
WordExport,
TextExport,
Selection,
Search,
Editor,
ImageResizer,
EditorHistory,
ContextMenu,
OptionsPane,
HyperlinkDialog,
TableDialog,
BookmarkDialog,
TableOfContentsDialog,
PageSetupDialog,
StyleDialog,
ListDialog,
ParagraphDialog,
BulletsAndNumberingDialog,
FontDialog,
TablePropertiesDialog,
BordersAndShadingDialog,
TableOptionsDialog,
CellOptionsDialog,
StylesDialog,
TextFormFieldDialog,
CheckBoxFormFieldDialog,
DropDownFormFieldDialog
);

import '@syncfusion/ej2-base/styles/bootstrap5.css';
import '@syncfusion/ej2-buttons/styles/bootstrap5.css';
import '@syncfusion/ej2-inputs/styles/bootstrap5.css';
import '@syncfusion/ej2-popups/styles/bootstrap5.css';
import '@syncfusion/ej2-lists/styles/bootstrap5.css';
import '@syncfusion/ej2-navigations/styles/bootstrap5.css';
import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
import '@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
import '@syncfusion/ej2-react-documenteditor/styles/bootstrap5.css';

const TestPage: FunctionComponent = (): ReactElement => {
const documentEditorRef = useRef<DocumentEditorComponent>(null);
const insertText = (): void => {
documentEditorRef.current!.editor.insertFormField('Text');

const textfieldInfo: TextFormFieldInfo = documentEditorRef.current.getFormFieldInfo(
'Text1'
) as TextFormFieldInfo;
textfieldInfo.defaultValue = 'Hello';
textfieldInfo.format = 'Uppercase';
textfieldInfo.type = 'Text';
documentEditorRef.current.setFormFieldInfo('Text1', textfieldInfo);
};

const insertCheckBox = (): void => {
documentEditorRef.current!.editor.insertFormField('CheckBox');
};

const insertDropdown = (): void => {
documentEditorRef.current!.editor.insertFormField('DropDown');
};

const formFieldsOnly = (): void => {
documentEditorRef.current.editor.enforceProtection('123', 'FormFieldsOnly');
};
const stopProtection = (): void => {
documentEditorRef.current.editor.stopProtection('123');
};

return (
<>
<div>
<button onClick={formFieldsOnly}>FormFieldsOnlybutton>
<button onClick={stopProtection}>stopProtectionbutton>
<button onClick={insertText}>Textbutton>
<button onClick={insertCheckBox}>CheckBoxbutton>
<button onClick={insertDropdown}>DropDownbutton>
div>
<DocumentEditorComponent
ref={documentEditorRef}
id='container'
height='830px'
serviceUrl='https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'
isReadOnly={false}
enablePrint={true}
enableSelection={true}
enableEditor={true}
enableEditorHistory={true}
enableContextMenu={true}
enableSearch={true}
enableOptionsPane={true}
enableBookmarkDialog={true}
enableBordersAndShadingDialog={true}
enableFontDialog={true}
enableTableDialog={true}
enableParagraphDialog={true}
enableHyperlinkDialog={true}
enableImageResizer={true}
enableListDialog={true}
enablePageSetupDialog={true}
enableSfdtExport={true}
enableStyleDialog={true}
enableTableOfContentsDialog={true}
enableTableOptionsDialog={true}
enableTablePropertiesDialog={true}
enableTextExport={true}
enableWordExport={true}
/>
);
};

export default TestPage;


AK Ameer Khalaf July 26, 2022 05:36 AM UTC

Btw I have problems using the latest version of SF
so I'm using the last version working that I have used.

See my ticket here:
https://support.syncfusion.com/support/tickets/394232


AE Ajithamarlin Edward Syncfusion Team July 28, 2022 04:56 AM UTC

HI Min,


We are glad to announce that our patch release (v20.2.40) is rolled out successfully. In this release, we have added the fix for the reported issue. 


Please upgrade to the latest version packages to resolve this issue.  

https://www.npmjs.com/package/@syncfusion/ej2-documenteditor 

https://www.npmjs.com/package/@syncfusion/ej2-react-documenteditor 


Feedback link: https://www.syncfusion.com/feedback/36447/resolve-script-error-while-adding-custom-context-menu

Please let us know if you need any further assistance


Regards,

Ajithamarlin E



AK Ameer Khalaf August 25, 2022 12:44 AM UTC

Hi  Ajithamarlin Edward,

I just tested this today with v20.2.40 and v20.2.45 and the icon for date custom field is still not showing.
I'm still using the code above. What am I missing here?



AE Ajithamarlin Edward Syncfusion Team August 29, 2022 04:30 AM UTC

HI Min,


Can you please share us the code snippet of how you have added the Custom date form fields, it may help us to validate further.


If possible can you please share us a simple sample.


Regards,

Ajithamarlin E


AK Ameer Khalaf August 30, 2022 12:22 AM UTC

Hi  Ajithamarlin Edward,

import '@syncfusion/ej2-base/styles/bootstrap5.css';
import '@syncfusion/ej2-buttons/styles/bootstrap5.css';
import '@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
import '@syncfusion/ej2-inputs/styles/bootstrap5.css';
import '@syncfusion/ej2-lists/styles/bootstrap5.css';
import '@syncfusion/ej2-navigations/styles/bootstrap5.css';
import '@syncfusion/ej2-popups/styles/bootstrap5.css';
import {
  DocumentEditorComponent,
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog,
  TextFormFieldDialog,
  CheckBoxFormFieldDialog,
  DropDownFormFieldDialog,
  TextFormFieldInfo
} from '@syncfusion/ej2-react-documenteditor';
import '@syncfusion/ej2-react-documenteditor/styles/bootstrap5.css';
import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';
import React, { FunctionComponent, ReactElement, useRef } from 'react';

import '@syncfusion/ej2-base/styles/bootstrap5.css';
import '@syncfusion/ej2-buttons/styles/bootstrap5.css';
import '@syncfusion/ej2-dropdowns/styles/bootstrap5.css';
import '@syncfusion/ej2-inputs/styles/bootstrap5.css';
import '@syncfusion/ej2-lists/styles/bootstrap5.css';
import '@syncfusion/ej2-navigations/styles/bootstrap5.css';
import '@syncfusion/ej2-popups/styles/bootstrap5.css';
import '@syncfusion/ej2-react-documenteditor/styles/bootstrap5.css';
import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.css';

DocumentEditorComponent.Inject(
  Print,
  SfdtExport,
  WordExport,
  TextExport,
  Selection,
  Search,
  Editor,
  ImageResizer,
  EditorHistory,
  ContextMenu,
  OptionsPane,
  HyperlinkDialog,
  TableDialog,
  BookmarkDialog,
  TableOfContentsDialog,
  PageSetupDialog,
  StyleDialog,
  ListDialog,
  ParagraphDialog,
  BulletsAndNumberingDialog,
  FontDialog,
  TablePropertiesDialog,
  BordersAndShadingDialog,
  TableOptionsDialog,
  CellOptionsDialog,
  StylesDialog,
  TextFormFieldDialog,
  CheckBoxFormFieldDialog,
  DropDownFormFieldDialog
);

const TestPage: FunctionComponent = (): ReactElement => {
  const documentEditorRef = useRef<DocumentEditorComponent>(null);
  const insertText = (): void => {
    documentEditorRef.current!.editor.insertFormField('Text');

    const textfieldInfo: TextFormFieldInfo = documentEditorRef.current!.getFormFieldInfo(
      'Text1'
    ) as TextFormFieldInfo;
    documentEditorRef.current!.setFormFieldInfo('Text1', textfieldInfo);
  };

  const formFieldsOnly = (): void => {
    documentEditorRef.current!.editor.enforceProtection('123', 'FormFieldsOnly');
  };
  const stopProtection = (): void => {
    documentEditorRef.current!.editor.stopProtection('123');
  };

  return (
    <>
      <div>
        <button onClick={formFieldsOnly}>FormFieldsOnly</button>
        <button onClick={stopProtection}>stopProtection</button>
        <button onClick={insertText}>Text</button>
      </div>
      <DocumentEditorComponent
        ref={documentEditorRef}
        id='container'
        height='830px'
        serviceUrl='https://ej2services.syncfusion.com/production/web-services/api/documenteditor/'
        isReadOnly={false}
        enablePrint={true}
        enableSelection={true}
        enableEditor={true}
        enableEditorHistory={true}
        enableContextMenu={true}
        enableSearch={true}
        enableOptionsPane={true}
        enableBookmarkDialog={true}
        enableBordersAndShadingDialog={true}
        enableFontDialog={true}
        enableTableDialog={true}
        enableParagraphDialog={true}
        enableHyperlinkDialog={true}
        enableImageResizer={true}
        enableListDialog={true}
        enablePageSetupDialog={true}
        enableSfdtExport={true}
        enableStyleDialog={true}
        enableTableOfContentsDialog={true}
        enableTableOptionsDialog={true}
        enableTablePropertiesDialog={true}
        enableTextExport={true}
        enableWordExport={true}
      />
    </>
  );
};

export default TestPage;


This is the output UI:



So I just click Text Button, ​then right click and click properties

then change the type to date, and click ok button


then click FormFieldsonly Button, ​when I click the date input field,
icons are not showing:



SM Suriya Murugan Syncfusion Team September 1, 2022 03:44 AM UTC

Hi Min,


We will update details shortly.


Regards,

Suriya M.


SM Suriya Murugan Syncfusion Team December 9, 2022 07:11 AM UTC

Min, we have checked the reported issue in version(20.3.60), we couldn't reproduce it.


Please check below sample for reference:

https://stackblitz.com/edit/react-mbdf8h?file=index.js


Can you please check it and let us know if you still having problems?


AK Ameer Khalaf March 23, 2023 02:18 AM UTC

Hi Surya Murugan,

After carefully investigating, I realized that I was just missing a dependency:

@syncfusion/ej2-react-calendars

Thanks for helping. Appreciate it :)​


Marked as answer
SK Selvaprakash Karuppusamy Syncfusion Team March 23, 2023 11:05 AM UTC

You're welcome, Ameer. We are glad to hear that your issue has been resolved now. Please get back to us if you need any other assistance.


Loader.
Up arrow icon