Another repeater problem

repeater-widget
#1

I have another issue with my repeater prototyping - essentially I want to add a row to the repeater but the first cell should be the start date the end cell should be the end date - I was originally hoping to have a single add button to update rows to “DD/MM/YYYY” while adding a new row with the end date but I could not get this to work so i added the plus and close icons to add and remove rows which doesn’t look great - I have the desired behaviour if you always click the plus icon in the bottom row of the repeater but I feel there must be a better way to achieve this?

Once you have entered a start and end date the CTA is enabled and you will see the date range and can split this date up into campaigns

https://u7rrik.axshare.com

Split Date.rp (64.5 KB)

Any help much appreciated

Thanks

#2

I’m not exactly sure what you are trying to ultimately do here… or what issue you’re trying to fix. Do you have sketches or screenshots of your desired states?

It looks like clicking the ‘+’ button in the top (or middle) row should result in a ‘blank right date text feild’ widget, but doesn’t. If I understand your need correctly, you were very close to getting this right–the trick is to first update all existing rows to have a blank end date then add a new row with the end date. But, what if the user has entered an end date for Split 1 and a start date for Split 2 already? Shouldn’t these be preserved instead of wiped out?

Here is a quick fix for this, and a few other things I noticed while trying to understand how you set this up.
Split Date.rp (117.5 KB)

Home is your original.

Page 1 is an update.

  • The ‘+’ button in the repeater marks all rows, then updates all marked rows to have a blank right date text feild instead of just the current row, then adds a new row with the text from ‘End Date field’ (same code as you had) then unmarks all rows. (I also added a "Split " title like you have for other rows.)

  • The initial “add Row” statements were moved from “onLostFocus” to the Split Campaign button. I noticed you can easily start with four or five splits if you go back and forth between the Start and End dates (e.g., fixing a typo or copy-pasting). This also lets you add two rows in one statement.

  • Then I moved the “enable (button)” statement to the OnTextChange for each text field and added condition so user can enter dates in any order. This could be improved by testing for valid dates–it currently accepts anything other than a blank field, which makes it easier to test with single-digit date values. You could also consider setting your input fields to a “Date” type to allow for easier date selection and verification.

  • The Split Campaign button has a style for Disabled so you can tell it is so.

Page 2 is a guess at fixing this:

  • The Split Campaign button works as a generic “add another blank split” when the repeater is visible. I just copied the code from the ‘+’ button and hid that.
#3

Thanks a lot for this, your right about resetting the date field to DD/MM/YYYY on adding a row and overwriting anything a user had put in but i was going add a condition once i got the initial desired behaviour of pushing the end date down the repeater rows and adding a date field with default dd/mm/yyyy - the end goal is for a data analysis project where the user selects an initial long period of time - 36 months and splits this date range into campaigns - example they know they have 10 campaigns in 36 months so they create 10 splits and then add dates - one idea is when the user enters a date in the right date text field the left text field in the row below auto populates with the follow date eg Users enters 13/06/2018 in a right text field the left text field in the row below auto populates with 14/06/2018 but this might not be desired from users

having thought about the single add a split CTA a bit have actually having a + icon at the end of every row would be better as the user could inset a row in the centre of the repeater although i dont think this is possible so would have to add a sort of date field to arrange the rows

I only have to demo this and not put in to user testing just yet so i can just talk about the desired behaviour and possibilities.

Thanks for you help, the abilities of axure and some of its users still amazes me, clients really benefit from seeing these sorts of interactive elements that get lost in static wireframes! Looking forward to the new release!

#4

Hi mbc66,

I feel like i am starting to get to grips with the repeater widget but I have run into another issue, I want to click on a date displayed in a calendar and have the date appear in either the left or right date field depending on which was focused - I thought I would be able to target either field using markrows, rules and [[TargetItem.Right_date_field_]] or [[TargetItem.Left_date_field_]] but I dont seem to be able to get the desired behaviour, please could you have a look and let me know what am I do wrong? I have added it to page 2 on the file attached

thanks

Sam

Split Date 2.rp (276.1 KB)

#5

When you mark a row in a repeater, you are marking the whole row, not individual widgets in the repeater cell (row). You also can’t test for the focused widget because when you click on a date in the calendar, it gains focus. Also, when updating a repeater row, the “virtual” base widget is not focused. So, you need some other way to track which input field, left or right, has focus. I used the default global variable, OnLoadVariable, setting it to “left” when the left input field gets focus. Then, when a date in the calendar is clicked, it tests whether OnLoadVariable equals “left” or “right” and updates the according repeater column–I did this for 1-May and 2-May only to demonstrate how this works.

Split Date 2.rp (281.4 KB)

Building out a calendar date-selector can be tedious. Creating it in a repeater can help make it easier, scalable and more robust–but only if you’re comfortable with repeaters.

A few things you could consider… Set the input field type to Date instead of text–this will utilize the browser’s built-in calendar selection component, so you don’t have to make your own calendar. Also, someone just posted this–I haven’t looked at it, but looks promising.
https://forum.axure.com/t/axure-mobile-calendar-kit/53502?u=mbc66

#6

brilliant thanks for all the help been playing around and achieving what i wanted!