Skip to Content

Visual Composer – You can do anything….

In my last blog, I introduced the new Visual Composer Modeling Resource Center. Now, I’m pleased to announce that we’ve added another Visual Composer application to the resource center – a “Task Management” application.
This Task Management iView is fairly basic but enables you to manage all your tasks, set priorities, define target dates to finish your tasks, search for a specific task and much more….
Just to remind you, the idea behind the Modeling Resource Center is to place different kinds of applications in one resource center so that we can all easily download the Visual Composer applications and enhance them according to our needs.

In this blog, I want to tell you about two problems I encountered when I was modeling the “Task Management” application and how I managed to solve them. You can find more information about the application (SQL script, gml files, documentation) here.

My first problem was that I didn’t know how to color the “Task List” table fields, which displays all the defined tasks. Each task has its own priority (Low, Medium, High, and Very High). I wanted to color the tasks in the table according to their priority – (Low – Green, High – Red, and so on) – but there was no way to do it directly “on” the table… )-:

The “trick” that I found was to add an expression box control to the “Tasks List” table (I named it – “ex_priority”).

I assigned the value of the task’s priority field to this virtual field.

In the Styles tab of the virtual field properties – I created four different styles with conditions so that the style of the field is determined according to the value of the priority field:
I closed the Control Properties dialog box, and in the Configure Element task panel I unchecked the visibility of the “original” Priority field and checked the visibility of the ex_priority field so that I could see only the new field in the “Tasks List” table.

That’s it – I saved the model, deployed and ran the application – here’s how it looks at runtime:

Another problem I had was how to update the “Tasks List” table at runtime, after adding/editing a new task.

When adding a task using the “Add Task” input form, we click the Submit button to update the database, the Submit button triggers the addtask stored procedure and the clearfields stored procedure (you can find more information about the stored procedures in the application zip file which contains the sql script) and the result is that the database is updated with the details of the new task.

To close the form after clicking Submit, we need to click another button: Close.


My problem was that after updating the database, I had to refresh the browser or run the model again in order to see the new task in the “Tasks List” table….:-(
In this case, the “trick” that I found was to add a virtual field named “Update” to the “Task Details” form. In the connecting line to the end point of the popup iView, I assigned the value true to the update field.

The popup is connected to the “Task Detail” form. To this form, I added a plain text control with the text: “Data has been updated. Click Refresh” and defined a hidden condition “!@update==’true’” – when the update field value is true – to display the “refresh” message.
To the same form, I also added a Refresh button with a custom action: REFRESH. From this point, all I had to do was connect the output of the form to the input of the freesearch stored procedure and select REFRESH for the event name. (The freesearch stored procedure accesses the database and returns all the results from the task database table in the Tasks List table – including the new task – and actually refreshes the application at runtime).

And….Voila! It works!
After adding/editing a task, the refresh message appears and when the Refresh button is clicked, the new task appears in the “Task Lists” table…

You must be Logged on to comment or reply to a post.
  • Hi Dafna,

    it’s a nice blog. I think there could be more blogs about Visual Composer.

    While I’m reading your blog I noticed that the user must click the button refresh after he adds a new task. We had a similar problem in our application. You can do this without a extra click by the user. You have to use a timer in your model. I wanted download your application but I can not find the zip file you mentioned in your blog.

    If you provide me with your model then I can insert the timer and so on for refreshing.

    Best Regards,


    • Hi Marcel,

      Thank you for your comments.
      You can find the link to the zip file in the document which describes the task management application.
      In order to get to this document, just click the link “here” in the blog. 
      Waiting to hear your solution to the “refresh” problem and any other suggestion you have for this application…

      Thanks, Dafna

  • Hello,
    Recently I’ve studied Visual Composer and read your blog.
    It’s so helpful.
    Thanks a lot for your nice sharing.

    I’ve found similar problem as you described about auto-refresh after popup window closed.
    So far I can only add a button “refresh” like you did in your sample.
    However, I found that other experts suggest using timer.
    I tried that component but failed since I have no idea how to use it.
    Do you try this component after your sharing?
    And would you please share it with me?

    Again, thanks a lot!