Binding data from multiple sources in a textarea

[Nathaniel]

Hello,
I’m struggling with something that should be fairly simple. I have a table with multiple fields (ie.: name, ticket, product) and I want to populate a textarea with a template that incorporates these values. I’ve tried the method below to apply one field (eq_customer_name), without result. I can bind the whole textarea to one field fine, but that destroys the purpose of the exercise:

															<p style="text-align:center"><strong>Escalation Management - Meeting Minutes - Ticket </strong></p>

<p>
<strong>Customer:</strong>{{serverconnect_current_escalation_qualifiers.data.current_escalation_qualifiers.eq_customer_name}} <br>
<strong>Date / Time of meeting:</strong> <br>
<strong>Attendees:</strong><br>
<strong>Meeting Notes:</strong>&nbsp; <br>
<strong>Next Actions:</strong>&nbsp; <br>
 </p>

														</textarea>

[Teodor]

What exactly are you trying to achieve?
You want to render this HTML code in a textarea, or?

[Nathaniel]

The textarea is a summernote editor that is prepopulated with certain fields, that the user can amend and complete with additional free text. It’s then inserted in a database to be stored and sent as an email.

It’s basically a way of preformatting an email and leaving some room for manual editing as well.

[Teodor]

I’d suggest you to wait a few more days until we get the summenote Integrated in Wappler.
Otherwise check the custom integration tips here:

Using an HTML editor with Wappler

I appreciate that Medium editor is available and will often replace the need for a typical HTML editor (CKEditor, TinyMCE etc.). However, it lacks many options that are typically found with HTML editors. If people are used to using the features of these editors (eg in this case, selecting colours/fonts etc.), it’s difficult to argue that they would be better off with fewer options. I decided Summernote would do the job (there’s a Bootstrap 4 version available and it’s quite lightweight). I tho…

Or use the Medium Editor available in Wappler as an editor

[t11]

This is how I used dmx-bind in a summernote editor

<textarea id="intro_page_gr" name="intro_page_gr" dmx-bind:value="getCurrentIntro.data.query1[0].intro_page_gr" onupdated="$('#intro_page_gr').summernote('code', this.data.value);"></textarea>

But I think that in your situation (to create an email from dynamic values) I would separate each of your data in distinct inputs

@Nathaniel

Customer:{{serverconnect_current_escalation_qualifiers.data.current_escalation_qualifiers.eq_customer_name}}
Date / Time of meeting:
Attendees:
Meeting Notes: 
Next Actions: 

So for the above I would have 5 distinct inputs.
And then I would create the HTML formating from the server connect email functionality

[Nathaniel]

Thanks Teodor, I have summernote working fine, my problem is binding one field after another within the textatea, I don’t know if that will be addressed with the future integration. In most cases people only have a need to bind one field to the textarea, I’m trying to bind multiple db fields concatenated to the same textarea:

<textarea>Name{{field_1}}; Lastname: {{fiedl 2}}</textarea>

[Teodor]

You need to use the dynamic attributes > input > value for this.

<textarea dmx-bind:value=" 'Name: ' + field_1 + ' Lastname: ' + field_2 "></textarea>

[Nathaniel]

Great, thanks for the guidance. I’ll see how well I can integrate html formatting with it too. Thanks @t11 for picking this one up too.

[Nathaniel]

I’ve got it working, thanks very much!

[brad]

@Nathaniel, what are you using for a text editor in your screen shot? I’d really love to replace the Medium editor on my dashboard.

[Teodor]

Brad,
You will have a replacement available in Wappler in a few days.

[brad]

Thanks @Teodor! I will wait until then. That is fantastic news. You guys amaze me.

[Nathaniel]

Hi @brad, it’s summernote, Teodor pointed out to an integration guide. It’s fairly easy to do, but if it’s going to be available transparently in Wappler, I’m of the opinion of holding on for a few days. I have a page with 8 different instances of the editor and it gets a bit messy to track the different js scripts.

[George]

Just out of curiosity- do all your summernote editors on the same page have same config options or different?

This will help us to make the best possible integration.

[Nathaniel]

Hi @George,
They all have the same config options. Thanks for the amazing job you’re doing with wappler!