Tables with sorting, tagging, progress bar, search and filtering

advanced-prototyping
newbie-question
repeater-widget
#1

Hello, I am new to this forum. I created advanced sortable table-repeater with search, rows counter, delete rows, progress bar filter.

In this hi-fi prototype I have several issues with filters:

  1. Tagging that not wrapping. Ideally those tag should have “x” close-remove functionality, and they should have auto-width and repeater based build. This I have a difficulty to figure-it-out.
  2. Progress bar numbers should have comma. Also I do not know how to make it work as a filter.
  3. Rows counter, as a push should move up, as user is deleting content. It is also probably very simple to make, but, I do not know how.

tables with sorting and filtering.rp (5.6 MB)

I would be most grateful if there’s anyone who could help me out here and take a look at my file!
Thank you in advance,
Natalie

#2

Hi Natalie!

  1. As you’ve found, there isn’t a good way to auto-size text or dynamically wrap text on a repeater widget. The best way to go about this would be to manually change the width of the repeater widget so that it does not go over this width in the generated HTML output.

  2. You can do this by using the .toLocaleString() method, which will input commas into the appropriate places. However, using toFixed and toLocaleString does not go well together, since they are both taking numeric input and ouputting strings, so I used josephxbrick’s method here to do this.

  3. Hmm, I’m seeing that deleting a row from the “SM Dynamic Table” repeater pulls widgets as expected. Could you point me to the place in your file where this isn’t working?

tables with sorting and filtering_EDIT.rp (5.6 MB)

#3

Hi Jane,
Thank you so much for fixing Progress bar numbers formatting!
From good news, I find a way how to fake auto fit text into tags. :slight_smile:

Here are 2 files with identical problems:
1 preview:
card-footer.rp (5.3 MB)

2 preview:
tables with sorting and filtering-NB_EDIT.rp (12.3 MB)

  1. Item’s counter status
  2. Moving footer up on reflow items after deleting
  3. (For card-footer.rp) In repeater I know how to delete Row. I my case, user like to delete not a Row, but few columns. 4 columns in my repeater are representation of ‘tags’. I like delete or edit tags, but keep card without change. So, my repeater work the way: if user clicks on card’s checkmark+delete icon, he can delete one-to-multiple cards, but if user clicks inside ‘Tag’ bubble he can edit or delete Tags.

Thank you again, Jane!
Natalie

#4

Hi Jane, I just realized that with file ‘card-footer.rp’ some strange bug between Share and Preview:

#5

Hi Natalie!

To move the footer after deleting a row, you can add a “Move to” interaction on the “SM Dynamic Table” repeater’s OnItemLoad to move those widgets to:

[[LVAR1.bottom + 10]]

where LVAR1 is the “SM Dynamic Table” repeater. This will move those widgets to the bottom of the repeater plus a padding of 10px whenever the repeater is refreshed, .e.g when a row is deleted. What will make this easier is to encompass those widgets below the repeater into a single Group so you only need to target one item for the Move To interaction.

As for deleting a tag, you can do this by adding a widget, e.g. “X”, and give it an OnClick to hide both the tag and the X widget. Again, this will be easier if you group the X widget with the tag widget together.

As for editing a tag, I was unsure of what you envisioned for this behavior. That is, did you want the user to be able to change the text of the tag widgets, or something else?

Last, thanks for the screenshots! I took a closer look, and it looks like setting text to a repeater widget to an image extension, e.g. “text.jpg”, will generate a CloudFront URL when published to Axure Share, and specifically when combined with a “Set Panel State” interaction, and I’ve filed this as a bug with our QA team so that we can get this fixed up. In the meantime, I’m afraid the only workaround I’m able to suggest is to use non-image file extensions (e.g. “file.txt”), but hopefully this helps a bit!

card-footer_EDIT.rp (5.3 MB)

tables with sorting and filtering_EDIT2.rp (5.6 MB)

#6

Hi Jane,

Thank you so much for all of your attention and for all of your help!

I have implemented your ‘movable footer’ and ‘tag deletion’ adjustments and they worked great across various instances of my Axure prototypes.

I so grateful to you for your incredible support!

Sincerely,
Natalie

#7

Jane, what do the merge and split buttons do? Can you provide a visual example?