Copy the tag text to a row

Feature Requests
1

Is there a possibility to copy the labelled/tagged text to a table in a row?

2

Hi @Andri_Bastiaanssen,

Welcome to the community!

Unfortunately, Retool doesn't support this functionality directly. However, you can achieve this by using a workaround involving JavaScript and HTML.

Here's a step-by-step guide on how to do it:

  1. Create a table in Retool: You can do this by adding a Table component to your Retool app.

  2. Add a Text component: This will serve as the label or tag from which you want to copy the text.

  3. Add a Button component: This will be used to trigger the copying of the text from the label and adding it to the table.

  4. Add a JavaScript query: This query will contain the JavaScript code that will perform the copying and adding of the text to the table. You can use the document.createElement() and appendChild() methods to create a new row and cell, respectively, and then add the text from the label to the cell.

Here's an example of how the JavaScript code might look:

let table = document.getElementById('tableId');
let label = document.getElementById('labelId');
let button = document.getElementById('buttonId');

button.addEventListener('click', () => {
 let row = document.createElement('tr'); // create row node
 let cell = document.createElement('td'); // create cell node
 cell.innerHTML = label.textContent; // put data in cell
 row.appendChild(cell); // append cell to row
 table.appendChild(row); // append row to table
});

In this code, replace 'tableId', 'labelId', and 'buttonId' with the actual IDs of your table, label, and button, respectively.

Please note that this is a simplified example and you may need to adjust the code to fit your specific needs. For example, if your table is inside a Retool component, you may need to use a different method to access the table element.

Also, remember to handle the case where the label is empty or the button is clicked multiple times. You may want to add some checks to ensure that a new row is only added to the table when the label contains text and the button is clicked.

Hope this helps.

:grinning:

Patrick

3

Hi Patrick,

It didn't work. I'm using the annotated text component. So every time when I label/tag a text it should save the label/tag text with the specific attach ID.

4

Let say we have a table with Andri_table:
ID= 12231
Text= Hallo this Andri with a question.
Title= (empty)

When I label the text with annotated text component: Hallo this label title

It should update my Andri_Table like this
ID= 12231
Text= Hallo this Andri with a question.
Title= Andri with questions

5

Hi @Andri_Bastiaanssen Thanks for reaching out! Your use case sounds doable, but I'm hoping you can share more information with us.

How is your table populated (SQL query, API query, etc)?

Can you share a screenshot of the annotated text component that would be used to update your table?

Generally speaking, you should be able to query the labelled text from your annotated text component & then pass that subtext to an update query for your table & refresh the table