Multiple Checkboxes to change button visibility

rp-7
newbie-question

#1

Hi Axure folk,

I have a list of x6 items, each item has a checkbox to the left

I have an ‘Add Item’ button

If an item /multiple items are checked, the button should be in an enabled state (clickable)

If no item(s) checked, the button should be in a disabled state (not clickable)

Above my list of items I have a ‘master checkbox’ - this has the power to check/uncheck all item checkboxes that appear below it… you’ve seen these before…

I have set conditional logic so that:

  • If the master checkbox equals>true the button is enabled

  • If the master checkbox does not equal>true the button is disabled

This effectively switches on/off the two states of the button which is built as a dynamic panel.

My difficulty is with the individual checkboxes for each of the x6 items…

I’ve set the same logic for each individual ergo… if checked = enabled -or- if not checked = disabled…

But this means that if I check 3/5 items then decide ‘oh wait I only need 2/5’ so I uncheck one… the condition is saying if this individual checkbox isn’t checked then the button must be ‘disabled’… but 2/5 are still checked so the button should be’enabled’

How do I overcome this!? Help!?
example.rp (98.9 KB)


#2

Hi jacks87,

I took a look at your file and it looks like you should be able to achieve the functionality that you’re looking for by using a global variable as a counter. For example, if you create a global variable called “Checker_boxes” that initiates at “0” and then you increment that variable by 1 every time a checkbox is enabled, you can count how many checkboxes are enabled. Similarly, every time a checkbox becomes unchecked you could subtract 1 from that variable. With this setup, every time you deselect all the checkboxes you would be left with that variable having a value of 0.

In order to get that variable=0 situation to set your button to its disabled state, you’ll want to create a dynamic panel that will serve as a checker for that variable value. To do this, every time you enable/disable a checkbox you will also want to move that “checker” panel by (0,0). This will allow you to trigger an “OnMove” for that checker panel, which will allow you to check whether your global variable = 0 and if so, will set your button to disabled.

Here are a couple of screenshots of what I mean:

I’ve also attached an edited version of your file that should do what you’re looking for. I hope that helps!
example EDIT.rp (104 KB)


#3

Thank you so much for this response, Global Variables… another Axure trick learned! What a great forum! :slight_smile:


#4

Hi,

I am relatively new to Axure, and in need for some help with the same problem posted here.

I am trying exactly the same solution provided here, but I am not getting any luck unfortunately. The checkboxes can’t show the Active ‘Remove Selected’ button that should show up when a check box is selected.

Can you please help and let me know what is the problem?

Also, I wonder can I use the same solution for ‘Select All’?

Finally, if the user clicks on ‘Remove Selected’, how can I show the same table of content but without the names that was removed? For example, if the user had removed 3 items, how can I show the table with the same content but without the 3 items removed?

Appreciate your help very much!
Example_Remove Functionality.rp (87.6 KB)


#5

Hi UX2016,

Welcome to Axure RP!

First, it looks like you have four box Groups in the repeater widget to accommodate for the four columns in your repeater dataset. This is unnecessary. You only need one box Group.

To clarify, the purpose of the repeater is that it’s a widget that can be used to display repeating patterns of data. Since this is precisely what you’re aiming to do (your repeater is displaying the same pattern of items, just in different columns), you should just keep one box Group containing Text Label_1, Rectangle_1, and Ellipse. Then, edit the “style” of the repeater so that it lists the items “horizontally” and wraps 4 items in a row:

Repeaters are an advanced feature of Axure RP, and so I’d strongly encourage you to go through our tutorials on the subject before diving in below:

Repeater Widget

Adding/Removing/Updating Items

Sort, Filter, and Paginate Repeaters

I am trying exactly the same solution provided here, but I am not getting any luck unfortunately. The checkboxes can’t show the Active ‘Remove Selected’ button that should show up when a check box is selected.

As Alyssa mentioned, you’ll want to have a type of listener widget where it checks for the value of the global variable via OnMove each time a checkbox item is selected or deselected. If that global variable equals a value of “0” each time it moves, then it will disable the button. A way to keep track of the value of the global variable is to increment the value of the variable by “1” each time a checkbox is selected, and similarly, decrement the value of the global variable by “1” each time a checkbox is deselected.

Also, I wonder can I use the same solution for ‘Select All’?

Yep, all you have to do is add an OnSelected event to the “Select All” checkbox where you set the selected of the checkbox in the repeater widget (“chkitem1”) to “true”. Then, add an OnUnselected event to the same checkbox where you set the selected of chkitem1 to “false”.

Finally, if the user clicks on ‘Remove Selected’, how can I show the same table of content but without the names that was removed? For example, if the user had removed 3 items, how can I show the table with the same content but without the 3 items removed?

This would fall under the umbrella of the repeater widget where its functionality allows you to mark, unmark, and delete rows. What you want to do is add an OnSelected event to the chkitem1 widget in the repeater to “mark rows This” where This is the selected row of the repeater. Then, add an OnUnselected event to the same chkitem1 widget where you “unmark rows This”. What this is doing is marking the specific checkbox item that gets selected, and unmarking the checkbox item that gets deselected. Lastly, add an OnClick to the Remove Selected Button where you “Delete Rows Marked” to delete the checkbox items that are “marked”.

The only other thing I noticed was that your repeater had its “Set Text on chkitem1 equal to [[Item.First]]” action on its OnLoad event, rather than its OnItemLoad event. You’ll want to move the “Set Text” action to the repeater’s OnItemLoad so that the repeater doesn’t draw blank each time you delete a row (each time you delete a row, the repeater refreshes).

I’ve attached an edited version of your file that should demonstrate the above steps. I hope it helps!
Example_Remove Functionality_EDIT.rp (78.3 KB)


#6

Thanks so much Jane, this is very helpful for someone new to Axure.

I have another related question, and that is when the user deletes an item or more the page should react in an interactive way, to show the white rectangle behind the names that shows up on view mode (after finishing the remove function), in a way that is less of height, and shift up the section of names below it, to indicate to the user that the removal had taken place visually. This can happen in both cases, when the use selects one or more name to remove, or when selecting all of them to remove. This behavior is what I want to achieve, but unsure exactly how. I hope you can help me with.

I am attaching my file here for your consideration.

I have posted this question over here as well Checkboxes control a button

P.S. The file you have posted has empty pages, unless I am missing something.
Example_Remove Functionality.rp (193 KB)


#7

Hi UX2016,

Sorry about that. It looks like I attached the wrong file, but I’ve uploaded the correct one now. Could you take a look at that file (Example_Remove Functionality_EDIT.rp) and let me know if that gets close to the delete display functionality you’re looking for?


#8

Thanks Jane again for your time & help!

My other question on 10-12-2016, 02:42 PM with the file ’ Example_Remove Functionality.rp’ has the other question that I want your help with at the moment. Hope you can have a look at it and let me know if you can help.

As I managed to replicate your solution to my first few questions posted on 10-09-2016, 08:33 PM, and I am all good with this now.


#9

Thanks Jane again for your time & help!

My other question on 10-12-2016, 02:42 PM with the file ’ Example_Remove Functionality.rp’ has the other question that I want your help with at the moment. Hope you can have a look at it and let me know if you can help.

As I managed to replicate your solution to my first few questions posted on 10-09-2016, 08:33 PM, and I am all good with this now.


#10

Hi Jane and all,

I have tried many times using different ways to solve the problem of the interaction required after the removal functionality, but I am not getting any where. Still new to Axure and would appreciate any hints. This is the exact problem:

I have another related question, and that is when the user deletes an item or more the page should react in an interactive way, to show the white rectangle behind the names that shows up on view mode (after finishing the remove function), in a way that is less of height, and shift up the section of names below it, to indicate to the user that the removal had taken place visually. This can happen in both cases, when the use selects one or more name to remove, or when selecting all of them to remove. This behavior is what I want to achieve, but unsure exactly how.

Please view the attached file ’ Example_Remove Functionality.rp’ to better understand what I mean

Thank you!
Example_Remove Functionality.rp (193 KB)


#11

Hi -
I’ve made a few updates…

  • Added some ‘fade’ animation to some of the actions to the onClick of the ‘Remove Selected’ event
  • Added ‘Treat as Lightbox’ to the ‘Remove Selected’ overlay
  • Applied some animation to the the ‘Removed Confirmation’ banner message to slide-down near the top of the browser window (no matter where the user has scrolled)…and also added an action for it to ‘slide-up’ (hide) after specified time.

Example_Remove Functionality-UPDATED_v1.rp (191 KB)

Anyways, probably not exactly what you were looking for, but figured I’d share some additional options.
TG


#12

Thanks ‘thatguymc’ appreciate the extra thoughts, while still in search for a solution for the other problem.


#13

To clarify your question, are you trying to have the highlighted portion in the screenshot below shrink as items are deleted, and have the bottom “Names” section move up to be fill in the space?

If so, then you’ll want to use the “Set Size” action to resize the “White rectangle_view mode” widget to be slightly larger than the repeater’s height, and you’ll also want to have the section with the repeater and the white rectangle pull the widgets below it. The method described below requires use of both local variables and dynamic panels.

In the attached file, I did the following:

  1. Added the “White rectangle_view mode”, “Gray Rectangle_Edit Mode”, and “Repeater_Remove” widgets into a dynamic panel and gave that panel a name (“Names Container”). The “Names Container” panel is set to “Fit to Content” so that when the content inside of the panel changes height, the panel adjusts and changes height too (this enables it to properly push/pull the content below it later).

  2. Inside of the “Names Container” panel, I added the “Repeater_Remove” repeater to its own dynamic panel, called “Repeater_Remove_Container”.

  3. On the OnClick of your “Remove Button on Message box” button, I added the following actions that hide the “Names Container” panel with pull (to pull the other widgets up), resizes both the grey and white rectangles to match the new height of the repeater, and then shows the “Names Container” panel again with a push interaction:

The result is that after repeater rows are deleted, the grey and white rectangles get resized to match the repeater’s new height (with padding), and the “Names Container” panel hides and shows itself so that the content below it winds up at the new bottom of the resized content.

In the “Set Size” action, you’ll notice that the height value has been replaced by

[[Repeater_Remove.height+110]]

. This is where the local variables come in.

To set up the height using local variables, click the “fx” button next to the Height field to open the “Edit Value” dialog.

In that dialog, create a local variable that references the widget “Repeater_Remove_Container”, and add that variable to the text area at the top of the dialog. To reference the height of that widget, add “.height” to the end of the variable name. To maintain the same amount of padding around the repeater before the rectangles got resized, add “110” to the function (this resulted from subtracting the original height of the repeater from the original grey/white rectangles). The result should look like the screenshot above.

Hopefully this helps!
Example_Remove Functionality Edit.rp (197 KB)


#14

Thanks Alyssa so much for this. Learned a lot about set size, pull widgets, push widgets & local variables. These are totally new to me.

One final thing on this please, is that I have tried many times and in different ways, showing a message saying:“No Names Listed” when the user selects the ‘Select All’ checkbox or selects all of the check boxes in the repeater. But I didn’t face any luck unfortunately. From “On Click” on “Remove Button on Message box” button which triggers all the actions to delete the names, I tried using the global variable “Checked_boxes” when its value equals 20 to show the message, but I was not able to get any results.

Any tips please??

Again, I am very grateful to all of your replies here, as I learned a lot from them…


#15

I have sorted this out by using a dynamic panel to trigger the action required.

Once more thanks for your help, I have learned a lot.


#16

Hi jacks87,

I’m working on something very similar where I want to select items from one repeater and copy the selected items into another repeater. Is this possible? Your file stops at the checkbox functionality, which is cool but my most significant need right now is to copy a bunch of rows from a repeater to another.

Any help in this area would be very much appreciated.

Thanks!


#17

Hi Friends,
i am new to axure, and am trying to use the above technique for tabs, where if any of the tab is selected it should another tab at the bottom. There can be many tabs which can be selected or deselected, infact the bottom tab should show even if one tab is selected, and should hide if none of the tabs are selectedtroubleshoot.rp (811.4 KB)


closed #18

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.