dynamically change button in skuid mobile

  • 1
  • Question
  • Updated 5 years ago
  • Answered
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],
$ = skuid.$;

// do stuff here - then change button text

var btn = params.component.button.text[0];
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?


Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 5 years ago

  • 1
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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],   
   $ = skuid.$;
var iconA = "fa-circle";
var iconB = "fa-circle-o";
var btn = params.component.button;
var buttonIcon = btn.icon;
var buttonText = btn.text;
buttonIcon.toggleClass(iconA).toggleClass(iconB);
buttonIcon.html('new text goes here');


Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
thanks Zach , works perfect. the last line should be

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