Set up a custom colored status field
Visforms offers much more than just a form component. It is therefore often used to create individual web applications for Joomla. These web applications implement tailor-made processes that are required for the respective website.
The collection of data and its successive processing with different statuses is a typical use case. Required status states could be something like “New”, “Complete”, “Reviewed”, “In progress” and “Closed”. It facilitates the overview and is often desirable if the current process status in the frontend is easily recognizable and displayed in color.
Even if Visforms doesn’t know a special field type “Status”, it’s still easily possible with some JavaScript. For example, you can use a “Radio Button” type field for this purpose.
A typical use case
- A first-time user fills out the form, such as a vacation request.
His entries are saved in the database. - The form has an Edit Only field of type Radio Button.
An administrator can use it later to set the current process status. - An administrator accepts the application, checks the submitted information, publishes the record and sets the initial status of the application, such as “New” or “In progress”.
The feature Edit data in frontend is used for this. - The application will now be processed further.
The administrators complete any missing information and set the appropriate processing status. - In the list view of the data view in the frontend, different statuses should be displayed in different colors so that they are easier to recognize visually.
Color code the status in the data view in the frontend
Field of type “Radio Button”
For the implementation, an additional field of the Radio Button type is inserted at the first place in the form. All required status values are created as options. Optionally, the field option Edit Only on the “Advanced” tab can be set to “yes”. This ensures that the status can only be changed by the administrators.
Warning: Please make a note of the ID of this field, which we will need later for the implementation of the color coding.
Control visibility with ACL
Transmitted data sets are displayed in the frontend using a menu entry of the type Visforms » Data View with Edit Link.
Use Joomla ACL to control
- who is allowed to see the entries,
- who is allowed to publish datasets and
- who is allowed to edit which data.
Color marking by JavaScript
We use custom JavaScript to color code the values of the status field. JavaScript can be integrated into the website in different ways. This also depends heavily on the options your template offers for inserting additional JavaScript. Many templates offer the option of simply integrating your own JavaScript either “inline” or in a special file.
example code
The following sample code assumes that the corresponding Status field has ID 89 and options Rejected, Completed, and Data Collected. The corresponding values of the sample code must be adapted to your specific conditions.
function setStatusColors () {
//adapt 89 in data-f89 to your field id
var elements = jQuery(".vfdvvalue.data-f89");
if (elements) {
jQuery.each(elements, function (index, element) {
var status = jQuery(element).text();
switch (status) {
case 'Rejected' :
jQuery(element).css('color', 'red');
break;
case 'Completed' :
jQuery(element).css('color', 'green');
break;
case 'Data Collected' :
jQuery(element).css('color', 'blue');
break;
default:
//"Neu" does not have a special color
break;
}
});
}
}
jQuery(document).ready(function () {setStatusColors()});
Add another block for each additional state you may need:
case 'StatusName' :
jQuery(element).css('color', 'StatusFarbe');
break;
If you have fewer status words, you have to remove blocks from the code accordingly. If you have more experience in programming with JavaScript and CSS, then you can extend the code as you wish. It would be conceivable, for example, for different “traffic lights” to be displayed as the background image instead of the colored status values.
Some features used are only included in the Visforms Subscription Features. These include the “Edit Only” field and “Data View with Edit Link” features.