I’m having trouble to create working chips. It is a little bit difficult to explain, but I will try my best.
First of all, let’s take a look at my prototype.
Here is what I want to create: A input (text) field which generates chips the same way as my buttons do. So every time the user types something in the input field and hits ‘Add’, it wil become a tag at the top.
As you can see I’m nearly there, but there are still some problems:
The text from the input field (‘Add’) doesn’t fit in the chips’ size.
If I hit the cross symbol in the chips I want the button to be shown again at the bottom (like it was before). Now they all just disappear once I clicked them.
This is a known problem in Axure. You can set a widget to “Fit to width” so its width dimension is set automatically based on its text value, but it will only “get fit” on the initial load. If the text changes, the widget dimensions don’t change. In a repeater, it would get fit for the first row, but not changed for subsequent rows. You can read more and see some workarounds and solutions in this thread:
But it looks like you’ve already done something like this… On the Add button you have some broken Set Text code and this javascript call:
There is no widget named “Labeltekst” so this won’t do anything. Perhaps you deleted it before posting your .rp file? At any rate, this method of calculating the pixel width of a rendered text string with javascript requires 1) setting the text of a widget (in your case, using the text value of the “SearchInput” text field); 2) waiting for that to happen–I recommend 100 ms; 3) calling the javascript .width() function; 4) waiting for javascript to return the value; 5) setting the width of the widget, using the same global variable as referred in the javascript call (“newWidth” in the example above.) In your situation you’ll want to do steps 1–4 outside the repeater, then in step 5 add a row to the tagRepeater so the required width (the value of the “newWidth” global variable) is available to be used. You will also want to account for the padding style of “tagBack” (the text widget in your tagRepeater) and the closeIcon by adding these widths to the width of the text string.
In your file the size of “tagBack” is set from the Add button. This would change the size of every instance of tagBack (all rows) which is not what you want. Also, the repeater’s Item Loaded already sets the size of row (a dynamic panel containing “tagBack”) --which is close to what you want. You are better off resizing “tagBack” (using [[newWidth + closeIcon.width +5]] to account for the closeIcon and padding) and set the “Fit to Content” style property of “row” to checked, which will let it resize automatically as “tagBack” gets resized. Also, the tagRepeater’s Item Loaded cases have two “IF true” statements which is not good practice.
I duplicated Page 1 to Page 1 (1), changed the Add button code, the tagRepeater code, created a “tagTemp” widget (to do “step 1” above) and a little “rulerDP” you can drag around to double-check the width calculations. When clicking Add its width will get set to the string width of the SearchInput text. If you click tagTemp its width will get set to the width of tagTemp. You can drag the right-arrowhead to manually resize the ruler’s width.
To do this, you’ll need a way to hide the word items in the (unnamed) repeater and track if it has been hidden. I set up a column in this repeater named “Hidden” so if its value is “true” it hides the “Bewustwording” widget. So, to hide a word, update the repeater with it’s row to “Hidden = true” and to show it again, update “Hidden = false”. I also added a “Cwidth” column to properly set the width of the “chip” when a word button in this repeater is clicked (I got the value of “51” by entering “Word 8” in the SearchInput and looking at the rulerDP; but I don’t have the same fonts installed, so your results may vary and you may need to adjust this.) Now, when a blue chip (named “rowDP”) is clicked, it sets OnLoadVariable equal to its text (actually [[Item.tagText]]) then has an action to “Move Bewustwording by (0,0)” which will “move” every row’s “Bewustwording” widget in that repeater by “no pixels” but fire its Move event. When that happens, the “Bewustwording” widget tests its text (actually [[Item.Cname]]) to see if it matches [[OnLoadVariable]] and if so shows itself by updating “This row” to “Hidden = false”. After this, rowDP deletes its own row in the repeater.
To finish this out, I duplicated Page (1) to Page (1) (1), removed the ruler and set the opacity of tempTag to 0 in its Loaded event. If its visibility is set to hidden, then the javascript code won’t find it and the resizing fails. I also assigned a “submit” button to SearchInput (the Add button) so that new words can be added by pressing the Enter key.
Wow @mbc66! This is exactly what I was looking for! Thank you for your time, clear explanation and the working file! It’s very interesting to learn what I should have done different and where I made some mistakes.
Once again; Thank you so much!! It has become much clearer for me now and it works perfectly now!
