On-type dynamic calculations with repeaters

repeater-widget

#1

Allocation%20example%201

So I have a repeater with username & allocation fields. Basically I’m curious if it’s possible to dynamically alter the ‘Allocation left’ percentage when the user inputs a percent in one of the Allocation fields.

For example, input 30% in the first allocation field and the amount left automatically changes to 70% ect.

Also wondered if it’s possible to add a new set of allocation fields after inputting into the original ones and retaining all those previous values?


#2

Yes, you can do all this. I’ll try to describe how I’d go about it, but it will probably be easier to understand if you can post your .rp file --then I or another forum user can see what you’ve done, suggest fixes and solutions which you can then inspect in Axure.

In your example, it looks like you have a repeater with two rows, and to the right of the repeater, an Add button and “Allocation left” title and rectangle widget (with “100%” text as default) --for demonstration purposes, I’ll name this “AlloLeft”. Now, you should have at least two columns in your repeater datasheet for “UserName” and “Allocation” --and Set Text actions in the Item Loaded event to fill the corresponding text fields. Add an action to the Item Loaded event to subtract each row’s [[Item.Allocation]] value from the value on your “AlloLeft” widget --for example,
Set Text of AlloLeft to value [[Target.text - Item.Allocation]]. To ensure you always start with 100% (available allocation) also add a case to Item Loaded with a condition for the first row, like this:
IF value [[Item.isFirst]] equals true, Set Text of AlloLeft to "[[100 - Item.Allocation]]" and place this as the first case in Item Loaded, then follow it with your existing case (setting text on fields and subtracting allocation amount) keeping the default “ELSE IF true” condition. If you want to include the ‘%’ character in the same text string as the numeric value of AlloLeft, add another case for:
IF [[Item.isLast]] equals true, Set Text of AlloLeft to [[Target.text]]%
…otherwise that non-numeric ‘%’ char will mess up your subtraction algorithm. (Or you could keep the ‘%’ in a separate widget like you have in the repeater.)

To handle this, you could either use a Key Up or Lost Focus event for your allocation text field in the repeater --or assign a Submit button for this field, depending on the experience you want. If you use Key Up then every number entered will trigger an update–so in your example, if I click in the allocation field, type ‘3’ then type ‘0’ I would see AlloLeft change from 100% to 97% then to 70%. If you use Lost Focus then I would not see any changes to AlloLeft until I clicked or tabbed away from the allocation field in the repeater. If you use a submit button, then I would not see a change until I hit the Enter key. (You can also use the Lost Focus event to fire the Click of the submit button to handle either of these user actions in the same way.) Either way, when the user changes the value of the allocation field in the repeater, the repeater should be updated, assigning the Allocation column to the value of the allocation field. This will trigger the Item Loaded event and recalculate the value of AlloLeft. Hmm… scratch that, it should work for Lost Focus and/or submit, but you would not want to update the repeater with a Text Changed or Key Up event as it would be too clunky, and probably lose focus of the input field making entry of more than one digit just about impossible. But if you want, you could still use the Key Up event to do an “interstitial” update of AlloLeft and then use only the Lost Focus or submit button to actually update the repeater.

Yes, I would definitely recommend a submit button for this. (You can add a button and hide it, or even use the existing widget with “%” on it; right-click the allocation field in the repeater and choose **Assign Submit Button" option. I’d suggest a case with
IF [[Item.isLast]] equals true
Update Rows ...
Add Rows to This add 1 row

Give this a shot and if you hit problems, post your .rp file and i’d be happy to try fixing it.


#3

Thanks a lot for the explanation, I followed the steps and with a bit of messing around, I think i’ve managed to get the functionality I was looking for

Cheers