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)?
