Hi Appgyver community. I am trying to overlay an icon on top of a toggle button (as in the image below with the blue question circle in the Pre-term toggle button) Ideally the icon would appear at the end of the toggle button label and creates an alert with information when the user taps it. This seems like it should be simple but being new to appgyver, I am not making head way on this. Ideas?
Hello Michael,
I could suggest three solutions:
- Create a new toggle list item component from scratch with containers:
- Container
- text
- toggle (primitive component)
- icon
You should set the container layout to “horizontal” and align items to center. Also the text should have the width: grow-to-width, the two other can go with the “fit-content”
You can set the logic this way individually to all the separate parts and can copy-paste this component as you please, or use it as a repeated container as well.
- Modify the toggle list container
- open the component in isolation mode (by clicking on the small icon in the bottom of properties tab as shown in Mari’s comment:
).
- place the icon there and also set the logic for the alert inside there (at least I think if you click outside then you do not have access to the icon separately, but the whole list item).
- lastly in the top left corner of the ui click on “Clone as new view component” this way you can reuse it in your app at other locations as well. (You’ll find it under the “By me” tab)
- Combination of the previous two:
- place the list item inside a container and set the container’s layout to horizontal.
- Add the icon to the container.
- style the container to match the list item style and you are good to go.
You can also reuse this component as a simple copy-paste of composite component.
As for the logic behind the show alert, use a Receive event of component tap and use the show alert flow function. If you have some toggle item specific data stored in a page variable or even data resource, you could then set the alert title accordingly, or the alert content as well. Use the data as You would in any text or other component.
2 Likes
Nice advice @Mihaly_Toth ! Just to point out that nowadays double-clicking will land you in the Component Style Editor where you can’t modify the structure of the component, just the styles. To enter Component Template Editor you’ve got to click the icon on Properties tab:
2 Likes
That’s right, I still end up sometimes in the wrong editor, for being used to the previous ways. Also updated the above comment. Thanks @Mari
2 Likes
Just what I needed Mihaly. Thanks so much!
1 Like
Thanks for clarifying Mari!
1 Like