Skip to main content
Nintex Community Menu Bar
Question

dynamically change button in skuid mobile

  • July 9, 2024
  • 3 replies
  • 12 views

Forum|alt.badge.img+7

When clicking a button I need to change the button text and icon. I 've figured out how to change the text:

var params = arguments[0],<br> $ = skuid.$;<br> <br>// do stuff here - then change button text<br> <br> var btn = params.component.button.text[0]; <br> btn.innerHTML = 'New button text';

However I can’t find a way to change the icon to another of the font awesome icons. Is there an easy way to do this?


This topic has been closed for replies.

3 replies

Forum|alt.badge.img+7

Any suggestions? I thought this would be an easy question for the skuid team? I’ve been looking around in the DOM/Object but there are multiple refrences to the icons and I can’t figure out the right way to to this.


Forum|alt.badge.img+13

Hi Peter,

Here’s a sample snippet that will toggle the icon of a Mobile Button back/forth between two icons, where iconA is the initial icon you set through the Mobile Composer, and iconB is a different icon. Basically you can just use buttonIcon.removeClass(ICON_NAME) to get rid of the current icon and buttonIcon.addClass(ICON_NAME) to change to a different icon.

var params = arguments[0],&nbsp; &nbsp;<br>&nbsp; &nbsp;$ = skuid.$;<br>var iconA = "fa-circle";<br>var iconB = "fa-circle-o";<br>var btn = params.component.button;<br>var buttonIcon = btn.icon;<br>var buttonText = btn.text;<br>buttonIcon.toggleClass(iconA).toggleClass(iconB);<br>buttonIcon.html('new text goes here');




Forum|alt.badge.img+7

thanks Zach , works perfect. the last line should be

buttonText.html('new text goes here');