Please create a button to toggle a status (e.g., Complete/Incomplete)

I am trying to do a very simple thing: displaying a button to toggle a task status between “Complete” and “Incomplete”.

I found 2 ways to do that. None of them really satisfactory. It would be really great to have a specific Toggle button for that.

1. Using a Form and customizing the button & rules

A task would be a record in a Tasks table with the following fields:

  • Assignee (connection to a User)
  • Due date (date field)
  • Task name (short text field)
  • Description (long text field)
  • Status (select “Complete” or “Incomplete”)

Right now, I use a Form to achieve this. This is rather complicated.

Form Rules
(1) if Status = “Complete”, then set to Blank
(2) if Status = “Incomplete”, then set Custom Value “Complete”
(3) if Status is Blank, then set Custom Value = “Incomplete”

Form Button format
(1) if Status is “Complete”, then change text = “Complete”
(2) if Status is not “Complete”, then change text = “Mark Complete”

for all these tests to work, I have to add the field “Status” to the form, and HIDE it so that only the button appears (none of the test will work if the value is not loaded in the front end).

To HIDE the value, I use a trick test:
If Due Date is not January 1, 1900, then Hide “Status” otherwise Do Nothing.

And lastly, when the form is submitted => redirect to the same page.

It kind of works. BUT very complicated to do. And SLOW (have to reload the page).

2. Using an action button in a Details element

A picture of the result

Here is the backend element (two buttons, but only one of them is displayed)

And here is how only of the buttons is displayed at a time

And there is a little bit of custom CSS to change the background color of the button based on the status.

.btn-primary {
background-color: #26C836;
border: 1px solid #26C836;

It is still UGLY and complicated. It runs faster than the Form trick.

Would it be possible to have some way to create a Toggle button (instead of using this kind of Form or Details element)?


What I would like to see if a toggle button like this! Is this possible?



@Chem @moe @tim.young - any comment?

The inline edit option for a table or for a details component, is UX-wise not a good solution. Having this toggle button option for a checkbox field would really make life much easier for any checklist solutions, which in my case, is used a lot.

1 Like

@Chem @moe

Tadabase team, is there any timeframe for when you might release an update to inline editing to make it TRULY inline.


Is this planned, is this part of the roadmap @moe ?

@moe it is a simple reply: yes or no…

Then my question in case of yes: when can it be expected

Hey @Peter and @centellix

This is on our roadmap, in a sense. We’re looking at this functionality as a possible feature for the next iteration of our Builder.

In the meantime, here is a post on how to use CSS to convert checkboxes into toggle switches using CSS.