Create tag from dynamic pannel element

[hananas]

Hi everyone ! I have just started my first prototype on Axure, I have succeed to do everything I wanted to THANKS to this community ! But now I think I am encountering a problem too difficult to solve on my own. Here it is : I have made a group with different buttons and each one is a dynamic pannel . If you click on it, a modal opens and inside it there is a check list. So, if you select at least one of the elements on it, when you validate the modal, this one closes and the button in the group changes his look. (if you select nothing the button stay the same).
All this is already done, and now is the tricky part :
_ In addition to this change of status, I d’like to add the creation of a tag that is named the same as the text contained in the button (dynamic). I have succeed to create a bloc(empty tag) when you validate the modal but inside there is only the text “validate” (that is also not seen properly) from the CTA. I d’like to change it but I really don’t know howwww.
_ the best would be after I succeed to create those tags to export them to an other page and that they are not seen directly in the same page (just appear in the next one. It isa form)

And because an image worth a 1000 words : tag-creation.rp (358.2 KB)
In this file the button “revetement mur …” at the bottom left is the only button that creates the tag.

Thank you very much if someone can help me !

[mbc66]

You have a lot going on here, with a lot of nested groups and dynamic panels, so understanding and editing it all is complicated… Here’s what I did to show a solution for the issues you mention.

tag-creation-v2.rp (696.3 KB)

• I named the widget which contained the button text label for “revetement-interactif”, so I could easily refer to it.
• I removed the CLICK OR TAP event from the “Revetement_button” group, because this would override the event on its parent dynamic panel, “revetement-interactif”, and you don’t want that.
• I created four global variables, varName, varWidth, varTags and varTemp
• Clicking the “revetement-interactif” button sets values for the global variables, then shows the MODAL-revetement.
  • varName = text on the button label
  • varWidth = (guess at the width of the label in px; trial and error to get it right)
• The Item Loaded event of tagRepeater updates varTags to keep track of all tags. This will allow the tags to be created on another page.
  • varTags = appends button label and width to create a list of tags (delimited by hash ‘#’, and semi-colon ‘;’ e.g., "Isolation#90;)

In addition to this change of status, I d’like to add the creation of a tag that is named the same as the text contained in the button (dynamic).

• The code for the “Valider” button (a group named, “validate_button”) adds a row to “tagRepeater”, setting the “tagText” column value to [[This.text]]. A group itself does not have a text value, so I’m surprised this works at all…but it appears that it might concatenate the text values of all widgets in the group, so you end up with a blank line for the background widget and “Valider” for the widget containing this text.
  • Obviously, you want the text from the calling button (“Revetement, murs, sols, plafonds”) and not the “Valider” button. So, I created the varName and varWidth global variables to handle this.
  • You don’t need to use a group or dynamic panel for a simple button like this. Much easier to have one widget.
• I made the “Isolation” button work as well to test adding multiple tag rows.

but inside there is only the text “validate” (that is also not seen properly) from the CTA.

• Set the style for “tagsOuterPanel” dynamic panel to “Fit to Content” so it will automatically and correctly resize itself, instead of trying to compute this manually, which isn’t working–all rows stack in front of each other.
  • The repeater and the “row” dynamic panel in the repeater should also be set to “Fit to Content” --then you only need to resize “tagBack” instead of resizing both–only to have no visual result because the repeater doesn’t resize.
• You have three cases in the Item Loaded event with “if true” so likely only the first of those will get triggered, but actually no way to control or predict which of these would be triggered.
  • The second, “Case 0” doesn’t appear to do anything you really need or want
    • “Move row to …” is likely causing all the rows to stack in front of each other
    • "Set Text v_curLeftOffset may help, but much better to leave spacing to the repeater’s Style properties. I moved this to the first “If True” case (just in case)
    • “Bring row to Front” would never do anything because the “row” dynamic panel is the only widget in the repeater (at the top level.)
  • The third sets the size of “tagsOuterPanel”, which is not necessary if that dynamic panel is set to “Fit to Content”
• I restyled the repeater to be Vertical with 5px row spacing, just so each tag will be visible. If you want a horizontal layout that wraps and has variable tag widths, you’ll need some more complicated math…which is maybe what you’re trying to do with the _var widgets, but it isn’t working. That is another issue, worthy of its own topic.

the best would be after I succeed to create those tags to export them to an other page

• I created a Page 2 to demonstrate it …this is where the varTags and varTemp global variables come into play.
• I copied the tagsOuterPanel dynamic panel (with repeater in it) to Page 2, and created some events on it:
  • Loaded sets value of varTemp to value of varTags, then sets value of varTags to blank (because the tagRepeater will build varTags as it loads each row), then fires the Rotated event
  • Rotated tests if varTemp is blank, and if not adds one row to tagRepeater, then removes that item from varTemp and fires Rotated again (thus a recursive call, so it will walk through each item in varTemp, adding a row for each item, then stopping when no more items remaining.)

and that they are not seen directly in the same page

• I copied Page 1 to Page 3, removed tagsOuterPanel and assigned the "Set Variable Value varTags action to the “Valider” buttons instead of in the tagRepeater’s Item Loaded event.