How Would You Create a Copyable Contact List?

Wappler General Need Help
1

I need to create a copyable contact list… so I have a data store like this:

ds_contacts
   first_name
   last_name
   email

And I want to create a single variable called email_list from the content of ds_contacts who’s value looks like this:

Joe Doe - joe@doe.com
Homer Simpson - homer@simpson.com
Fred Smith - fred@smith.com

So I can then let the user assign the value of email_list to their paste buffer and use elsewhere.

How would you go about assigning the value of email_list?

2

Not a Wappler solution but I have used Clipboard.js on input fields before:

It will also work on table contents too…

3

I did this on a textarea. I dump the data into a variable and then use the variable as the data source for this textarea. All the user has to do is click anywhere in the textarea and that copies the contents to the clipboard.

A bit of clever CSS on the textarea can make it look like all other DIVs.

I’ve not been able to get it to work (easily) on a DIV yet.

<textarea id="text2" class="form-control" dmx-on:click="browser1.selectAll();browser1.copy()" value="" dmx-bind:value="inp_driv_rep_status.value.default('No Data!')" placeholder="Please be patient..."></textarea>
4

Hi Antony, please try setting the var value like that on button click:

dmx-on:click="email_list.setValue(ds_contacts.data.values(`first_name + ' ' + last_name + ' - ' + email`))"

This should set the values as a comma separated list in the variable.

5

That’s what I needed to know @Teodor, thank you so much!

How would I replace the comma separator with a new line?

I’ve tried this:

email_list.value.replace(&quot;,&quot;, &quot;<br>&quot;)

But I get the error message:

Formatter replace in expression [email_list.value.replace(',', '<br>')] doesn't exist for type array

and I’ve tried using .split() since Wappler seems to think I have an array, and that gives a similar message.

So even though email_list feels like a variable which contains plain text, it looks like Wappler considers it to be an array, but I can’t split it like an array…

So I’m rather confused! :crazy_face:

6

first_name + ' ' + last_name + ' - ' + email

Try adding a new line in this concatenation operator itself. Something like:

first_name + ' ' + last_name + ' - ' + email + '\n\r'

7

Oh, yes, I think I was a bit slow there… thanks @sid!

What is the difference between \n and \r?

8

Not sure to be honest.
Some places \n works
Some places \r works
Some places \n\r works.

9

I think it is one of those things dating back to early terminals, etc. Line feed \n was to move to next line and carriage return \r was to move to the far left.

I think for JavaScript \n is all you need now.

1 Like
10

Maybe I wasn’t that slow…

Your solution @sid still leave me with the commas!

Fifty Fiiiive - antony55@blabla.com

,Fifty Six - antony56@blabla.com

,Fifty Seven - antony57@blabla.com

and I clearly only need \r OR \n ! :slight_smile:

11

Try email_list.value.join('\n').

\n is only needed, that works cross platform. \r only was used on old mac’s, \r\n is windows. \n\r is invalid.

12

Perfect @patrick, thank you! So the complete solution is:

email_list.setValue(all_contacts.data.values(`first_name + ' ' + last_name + ' - ' + email`).join('\n')