Show A Badge With The Number of Tasks Left To Do

Wappler General Need Help
1

I have a menu that shows the number of buttons that are links to pages that are either completed or need to be completed, (see image).

10%20PM
Screen Shot 2019-06-25 at 9.29.10 PM.jpg2648×1800 582 KB

What I would like to do is display a badge showing the number of buttons left to complete. This would help the user to see that there may be buttons below the ‘horizon’ of the viewport of smaller screen sizes.

The show/hide at the moment is based on the table’s id that is not empty. As the above image indicates, the green button indicates the page needs to be completed, when clicked will take the user to the insert page. The blue button indicates the page is completed and the link, when clicked, will lead the user to the update page.

Thank you for any suggestions.

2

Hi.
Assuming your table is generated from a server connect and repeat region, and there is a field which is being used to determine whether to show blue or green button… You can apply filter on the server connect source data using where , with property is same used for buttons, and value would be the one used for green color.
Then, you can use count function to get number of pending (green) tasks. It would look something like this:
serverConnect1.data.where(task_status, 'pending', ==).count()

This code can be set up using visual picker on the badge’s dynamic attribute - value/text.

3

Thank you Sid, your comment has given me a better understanding of other options. Your suggestions are welcomed…

Take a look at the code below that I am using for the buttons, and you can see that I am using the table ‘ms_app_id’ determine the status of each task.

Unfortunately, the series of tasks are not within a single table. The data of each questionnaire of the application is held in its respective table. The status of that questionnaire is displayed in a bootstrap card. Each task queries whether the ‘ms_app_id’ from its table exists.

Below is the code for each:

<div align="center" class="mb-4 col-sm-4 col-lg-3">
<div class="card card-body shadow"> Spouse Information <button class="btn btn-sm btn-success" dmx-on:click="browser1.goto('ms_app_a_2_personal_spouse.php')" dmx-hide="sc_ms_app_progress.data.ms_app_0_4_02_spouse[0].ms_app_id"><i class="fa fa-plus">&nbsp;</i>To Do</button>

<button class="btn btn-sm btn-primary" dmx-show="sc_ms_app_progress.data.ms_app_0_4_02_spouse[0].ms_app_id" dmx-on:click="browser1.goto('../app_updates/ms_app_a_2_personal_spouse_update.php')"><i class="fas fa-user-edit">&nbsp;</i>Update</button>

</div>
<!-- /.card card-body shadow -->
</div>
<!-- /.mb-4 col-sm-4 col-lg-3 -->
4

I'm not sure i understand this part.

But from the code you have shared.. it seems you are using the FIELD (not table) ms_app_id to determine whether to show blue or green buttons.
This would work for getting the count too.

sc_ms_app_progress.data.ms_app_0_4_02_spouse.where(ms_app_id, null, ==).count()
Use the visual picker in dynamic attribute value of badge to build out the code which would be similar to above. Make sure to make the condition which suits your case.. id==null or id>0 or id==true.

5

Your right, I see that mistyped that. Once our power is restored I let you know how it worked. The Bahamas is having trouble with their power station.

Nevertheless, I really appreciate you taking time to help!