1. Home
  2. Forum
  3. React - EJ 2
  4. How to use variables in DocumentEditorComponent?

How to use variables in DocumentEditorComponent?

Hello! I use DocumentEditorComponent.
How can I set/update variables in the text? I want change some part of text depending on the user.
I have a placeholder text. And I want to set the userName from userData.
For example: 
Mike has a dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.........

Thanks!

15 Replies 1 reply marked as answer
KB Kurthis Banu Abdul Majeeth Syncfusion Team June 21, 2021 08:52 AM UTC

Hi Yuliia,  

We are cross checked your requirement. We suggest you use find and replace functionalities to achieve your requirement. 

Code snippet: 
 
this.container.documentEditor.search.findAll(“textToFind”); 
 
this.container.documentEditor.search.searchResults.replaceAll("textToReplace"); 
 
this.container.documentEditor.search.searchResults.clear(); 
 


Kindly refer the below documentation link also: 

please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


YU Yuliia June 21, 2021 03:57 PM UTC

Can I use variables in the text?

For example:

{userName} has a dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.........

Thanks!


KB Kurthis Banu Abdul Majeeth Syncfusion Team June 22, 2021 06:52 AM UTC

Hi Yuliia, 

 You can achieve your requirement like below examples. 

Code snippet: 

this.container. documentEditor.search.find("{" + "userName" + "}"); 
 
this.container.documentEditor.search.findAll ("{" + "userName" + "}"); 
 
this.container.documentEditor.search.searchResults.replaceAll("Mike");  
 
this.container.documentEditor.search.searchResults.replace("Mike");  
 
 


Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


YU Yuliia June 22, 2021 08:27 AM UTC

Thank you! It helps in the search.

But if I have a list of variables how can I put it in document?

const list = [
  {
    pet: 'dog',
    userId: '1234'
  },
  {
    pet: 'cat',
    userId: '2345'
  }
];

<DocumentEditorComponent ref={(scope) => { this.documenteditor = scope; }} />

User sees a list: 'cat', 'dog'. How to put a variable in the document if he chose 'dog'? And I want to set it as a variable, not as a text: because if the user changes his pet from 'dog' to 'cat' I also want to change it in text (by userId).

Thanks!


KB Kurthis Banu Abdul Majeeth Syncfusion Team June 23, 2021 04:13 PM UTC

Hi Yuliia, 

We had cross checked your requirement. We are suggested to use FormField (TextFormfield) to achieve your requirement.  

 Kindly refer the below documentation link:  

Demo Link:   

Regarding: if the user changes his pet from 'dog' to 'cat' I also want to change it in text (by userId). 

You can modify and reset the value in form fields using importFormData method. 

Documentation link: 
  
For your convenient, we have prepared sample in react sample. On "UpdateData" button click, will fill the form with provided values.  

Sample Link: 
https://stackblitz.com/edit/react-5iwxw1?file=index.js (Please find the code change in line number 35.) 

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


YU Yuliia June 25, 2021 01:14 PM UTC

Thanks a lot! This is what I'm looking for.

One more question. How to insert a new variable with a custom name? I use:

documentEditor.editor.insertFormField('Text');

but 'fieldName' is set as 'Text1'. So I get:


For example, I want to create a field "UserId33" with a value "Fox". How to do it?


Thanks!


SM Suriya Murugan Syncfusion Team June 28, 2021 09:28 AM UTC

Hi Yuliia, 

To achieve your requirement, instead of form field you can use bookmark. 

Please check below sample for reference: 


Note: in above sample replace the field with value by using bookmark. 

Documentation Link:  

Please check it and let us know if you have any questions. 

Regards, 
Suriya M. 


Marked as answer
YU Yuliia replied to Suriya Murugan September 8, 2021 02:06 PM UTC

Hello! Can you provide the sample code how to change fieldName programatically as in example https://ej2.syncfusion.com/react/demos/?_ga=2.30936447.1944405803.1627288834-615821001.1620994270#/material/document-editor/form-fields  ?



Thanks!


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 9, 2021 08:31 AM UTC

Hi Yuliia,  

We are cross checked your requirement. You can insert the field name and you can modify and reset the value in form fields programmatically  using importFormData method. Please find the code snippet to achieve your requirement. 

Code snippet: 
onImportFormData() { 
    let textFormField1 = { 
        fieldName: 'UserId1', 
        value: 'Dog' 
      }; 
      let textFormField2 = { 
        fieldName: 'UserId2', 
        value: 'Cat' 
      }; 
      let textFormField3 = { 
        fieldName: 'UserId3', 
        value: 'Lion' 
      }; 
      this.container.documentEditor.importFormData([ 
        textFormField1, 
        textFormField2, 
        textFormField3 
      ]); 
    } 

 
In above highlighted field name will display in text form field dialog. 

Please find the screenshots for your reference: 
 


Documentation link:  
  

  

For your convenient, we have prepared sample in react. On "UpdateData" button click, will fill the form with provided values.   

Sample Link:  
https://stackblitz.com/edit/react-5iwxw1-hrg9tv?file=index.js (Please find the code change in line number 35.)  

Please let us know if you have any questions.  

Regards, 
Kurthis Banu A. 


YU Yuliia replied to Kurthis Banu Abdul Majeeth September 9, 2021 09:34 AM UTC

Thanks for the answer!

There are fields with fieldName `UserId1`, `UserId2, `UserId3` in defaultDocument in your example. And the code `this.container.documentEditor.importFormData` just changes their values.

 And now in your example: how to change the fieldName `UserId1` to `UserId11111` as a next step? There is this opportunity to do it in the suncfusion modal, but I want to change it from another place in my app.

Thanks!


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 10, 2021 12:23 PM UTC

Hi Yuliia, 

We are checking your requirement. We will update the further details on September 13,2021.   

Regards, 
Kurthis Banu A. 


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 13, 2021 07:49 AM UTC

Hi Yuliia,  

We have cross checked your requirement. Document Editor doesn’t have option to edit/modify the fieldname programmatically. Instead, you can edit the “fieldName” in UI level using form field properties dialog.  

For your reference we have attached the screenshot in below 
 

Please let us know if you have any questions. 

Regards, 
Kurthis Banu A. 


YU Yuliia replied to Kurthis Banu Abdul Majeeth September 13, 2021 09:16 AM UTC

Hi! If you have such option in your modal, can you give the programmers the opportunity to change 'fieldName'?

Thanks.


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 14, 2021 01:45 PM UTC

Hi Yuliia,  

We are checking your requirement. We will update the further details on September 15,2021.    

Regards,  
Kurthis Banu A.  


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 15, 2021 10:41 AM UTC

Hi Yuliia,   

We are cross checked your requirement. As we said earlier, it’s not possible to edit fieldname programmatically, because it’s a unique name. Using this you can retrieve form field information. Form field name is not display in document and its value only visible. Can you please share the purpose of changing field name programmatically? 

You can be able to change the Default value using “setFormFieldInfo” API. Please check in below code snippet. 

Code snippet:  
 this.container.documentEditor.setFormFieldInfo("Text1", textfieldInfo);  


For your reference, please find documentation Link: 



Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon