I would like to get a bit field to show as a checkbox

I am trying to add a check box to my field display.

I am using code as below:

select serialno, check01, first, last, add1, city, prov, postal, country, emailaddress01 from Test01

The check01 field is a datatype bit and I would like it to display as a checkbox where the operator can have it checked or unchecked.

How would I do this?

Are you using SQL Server?

If so, Retool treats the bit field as a boolean.

In my case the active field is a bit column on the back end.

image

And it is linked to my form's Switch component (Checkbox behaves the same way) like so:

image

Of course you could also use the Default value field if applicable to you.:

image

Just add the value as normal when using it in an update query:

image

or

Hey @mdsmith1 :wave: If you are still blocked here would you mind sharing screenshots? Thanks!

Lauren:
I am attaching screen shots from an application I did not write and it probably was not done with MySql, but it shows what I am trying to accomplish.
The left column is a check box, after you click on a check box, it asks if you want to Edit or Delete. I can handle that part. My difficulty is getting the check box to show in the table.

Hey @mdsmith!

If you enable multi-row selection you get the option to use a checkbox for selecting columns:

You can try pairing that with a row select change event handler:

Does that seem like it could be what you're looking for?

I am making progress with this. But I am not quite there. I have set up the "Row select change" with a "Control query" but I am not sure what code to put into the "Query". S


ee attached screen capture.

:thinking: you mentioned wanting your app to ask if you want to Edit or Delete, could you describe more about what you want to do after that? Specifically, are you looking to edit rows with a form or directly in the table?

If you're using an event handler you can reference the most recently selected (checked) row with _.last(table1.selectedRow.data) which I imagine is a good place to start, knowing exactly what you're looking to do I can try to give a more robust example though.

Side note:

You can also consider using a Boolean column for this as it also displays "checks" just not the "box" the event handler would be a bit different but it might be easier to disable multi-select and just work with yourTable.selectedRow instead. It would also map a bit easier to your check01 column.

Multi-select:

Boolean column:

Kabaras:
I have tried to follow your instructions but I am not there yet.
I have a field EXTRA1 which is text. I set its type as Boolean so it would show with checkmarks.
Then I set up a component "Delete2" as per the attached screen capture. You can't read the code. The code in the little box is {{ table2.selectedRow }} . When I click on the Delete key and Save and Refresh, nothing happens.

If you're using the "Filter by" field the query is expecting just the value it should be checking against (e.g. {{ selectedRow.data["EXTRA1"] }}) instead of the full selectedRow.data object. What exact syntax you'll need depends on what the keys for each column are in your table data!

Kabirdas, I am finding this thing very unstable. It wants you to give it multiple rows and when I select that it wipes out the entire data file.
It would be simpler for me to put up EXTRA1 as a number and only permit entries of 0 or 1. And where they entered 1, I would delete that record. How would I go about setting up limitations on the entry as 0 or 1 in the table?

Ah! I think I misunderstood what you're trying to do here. From this last post it sounds as though you're looking to have a user select multiple rows and then delete each of those rows from your database, is that correct? Could you also explain to me exactly how you'd like the edit flow to work?

Kabirdas, after some contemplation I am thinking of a screen with the data file. On the left end of each row would be place where they could enter a 0 or 1. Its like a check box but it would be 0 or 1. The entry field would not accept any other numbers.
After the user had entered 1's beside all the rows he would like to delete, he would then press a Delete button that would undertake the deletions.
The only help I need is the controls on the number field such that it would only accept 0 or 1.

Alright, just to give a complete answer:

For the query itself, it's good to have a unique identifier that you'll be using to identify which rows to delete, something like an id column. From there, you'll just want to grab those ids from whatever user selection has been made in the front end. This is actually relatively straightforward when using a table with multiselect enabled. In that case you can just map over the table.selectedRow.data property, which will be an array of the selected rows, to grab each row's id:

Note the option to allow the query to modify multiple rows in the database, this allows you to delete multiple rows at a time which can be particularly dangerous if the identifier you're using is not unique.

An alternate method is using something like the trigger a query for each item in an array example from our docs, in which case you would not need to allow the query to modify multiple rows in the database since you'd be using it to delete one row at a time.

var rows = table1.selectedRow.data;

function runQuery(i) {
  if (i >= rows.length) {
    console.log("Finished running all queries");
    return;
  }
  var data = rows[i];
  console.log("Running query for row", data);
  query1.trigger({
    additionalScope: { 
      data: data, 
   }, 
   // You can use the argument to get the data with the onSuccess function 
    onSuccess: function (data) { 
      runQuery(i + 1); 
    }, 
  });
}

runQuery(0);

That, or you can use promising an array of query returns:

const promises = table1.selectedRow.data.map((row) => {
   return query1.trigger({
     additionalScope: {
       id: row.od,
     },
   });
});

return Promise.all(promises);

In each of the two above cases you query would look like this:

In all three cases the key is you're referencing an array that contains all the rows that need to be deleted, I've been using table1.selectedRow.data for that but if you'd rather specify it based on a 0 or 1 input given by a user you can do something like table1.recordUpdates.filter(row => row['your number field'] === 1) instead, checking through the table1.recordUpdates property which contains all rows that have some change, and filtering out only those for which a user has entered 1.

Unfortunately, we don't support custom validation for table columns at the moment though it is on our dev team's radar and we'll report back in this thread when it has been included! In the meantime, you can configure a dropdown column to only have the values 0 and 1:

Let me know if that helps!

Kaberdas:
Thank you for your reply.
I am getting error messages in my code.
My table is Test01 and my array is table2 . The filter code may not be readable so I am repeating it here:
{{table2.selectedRow.data.map =>(row.id)}}
The error checker is not buying it. I have attached a screen capture.

Can you try using {{table2.selectedRow.data.map(row => row.id)}}? The => notation indicates an arrow function expression where you'll need to specify what is getting passed to the function on the left-hand side of the arrow (in this case, that would be row).

Kabirdas: The error checker is not buying it.
The code I have entered in the delete function is:
{{table2.selectedRow.data.map(row => row.id)}}
The error message I am getting is:
Error:table2.selectedRow.data.map is not a function
I am attaching a screen capture for your information.

Hmm.. Just as a guess - table2.selectedRow.data.map will only work if you have multiselect turned on for your table. Otherwise, you can try using [table2.selectedRow.data.id] to delete only the currently selected row, or, use table1.recordUpdates.filter(row => row['your number field'] === 1)