How can I dynamically make an action button text change?

[Jay Talbott]

I would like to make the text on an action button reflect the value that I have in a session variable.
I have tired what is in the image below.
button_session_variables.jpg
I am a bit confused about the syntax on the button, or if this is even possible.

I tried

<%A5 ?session.meal1%>

which works just about everywhere else.

The bottom of the box mentions a5 language tags, with which I am not familiar, but it shows them as opening and closing tags like <a5:r> </a5:r>. The help on the box does not mention using any other type of a5 tag.

I am not having any luck getting this to work; any help would be greatly appreciated.
Thanks.
Jay

[Davidk]

Re: How can I dynamically make an action button text change?

There's probably a way better method of getting this done... but here's one way... and it follows the rules...

In your OnGridExecute event, you get to alter the grid settings which are held in e.tmpl. When you're in the coding part for this event, click the "XBasic" tab at the bottom. Now find your Action Button code... the one you're after for your button will be something like...

DIM tmpl.controls[1] as P
with  tmpl.controls[1]
	.idInternal = "905fd687-e589-423d-a3ac-175a45b00d83"
	.type = "Button"
	.Name = "SHOWSESSION"
	.trailingSeparator = .T.
	.bubbleHelp = ""
	.readDataFrom = "GridPart"
	.actionJSAttribute = ""
	.actionJSGlobal = ""
	.actionXbasic = ""
	.actionClientSideXbasic = ""
	.buttonStyle = "Text only"
	.buttonClass = "[class.gridButton]"
	.buttonClassHover = "[class.gridButtonHover]"
	.buttonClassPressed = "[class.gridButtonPressed]"
	.buttonClassDisabled = "[class.gridButtonDisabled]"
	.buttonInlineStyle = ""
	.buttonText = "ShowSessionVar"
	.hyperlinkClass = "[class.gridHyperlinkButton]"
	.hyperlinkInlineStyle = ""
	.hyperlinkImagePosition = "None"
	.textClass = ""
	.textInlineStyle = ""
	.imageName = ""
	.hoverImageName = ""
	.pressedImageName = ""
	.disabledimageName = ""
	.imageClass = ""
	.imageInlineStyle = ""
	.securityGroups = ""
	.serverSideShowHideExpression = ""
	.readDataFromForClientSideExpns = "GridPart"
	.clientSideShowHideExpression = ""
	.clientSideEnableExpression = ""
	.precalc.watchJavascriptShowHide = ""
	.precalc.watchJavascriptEnable = ""
	.precalc.watchColumnsShowHide = ""
	.precalc.watchColumnsEnable = ""
	.precalc.JStoSetupWatchEvents = ""
	.precalc.buttonObjectJavascript = <<%str%
window['{grid.componentName}_BUTTONS_SHOWSESSION'] = new A5.Button({
	layout: 'text',
	className: '[class.gridButton]',
	hoverClassName: '[class.gridButtonHover]',
	pressedClassName: '[class.gridButtonPressed]',
	disabledClassName: '[class.gridButtonDisabled]',
	html: 'ShowSessionVar',
	onClick: function() { 
},
	theme: '{grid.style}'
});%str%
	.precalc.objectHTML = "<button type=\"button\" id=\"{id}\"></button>&nbsp;"
	.precalc.objectName = "{grid.componentName}_BUTTONS_SHOWSESSION"
	.precalc.bindJS = "{grid.componentName}_BUTTONS_SHOWSESSION.bind({bindIdList});"
end with

We don't need all this code... just this part...

	.precalc.buttonObjectJavascript = <<%str%
window['{grid.componentName}_BUTTONS_SHOWSESSION'] = new A5.Button({
	layout: 'text',
	className: '[class.gridButton]',
	hoverClassName: '[class.gridButtonHover]',
	pressedClassName: '[class.gridButtonPressed]',
	disabledClassName: '[class.gridButtonDisabled]',
	html: 'ShowSessionVar',
	onClick: function() { 
},
	theme: '{grid.style}'
});%str%

Copy this part of the code as change it so that it looks like the code below... the only change is that we're assigning the button code to btnJS instead of .precalc.buttonObjectJavascript

dim btnJS as c
btnJS = <<%str%
window['{grid.componentName}_BUTTONS_SHOWSESSION'] = new A5.Button({
	layout: 'text',
	className: '[class.gridButton]',
	hoverClassName: '[class.gridButtonHover]',
	pressedClassName: '[class.gridButtonPressed]',
	disabledClassName: '[class.gridButtonDisabled]',
	html: 'NewNewButtonName',
	onClick: function() { 
},
	theme: '{grid.style}'
});%str%

Next, find and change our button label text to what we want... and assign the whole thing back to e.tmpl

dim newJS as c
newJS = stritran(btnJS, "NewNewButtonName", Session.vname)

e.tmpl.controls[1].precalc.buttonObjectJavascript = newJS

So... my Action Button had the Button Label Text as "NewNewButtonName". Give your button label a fairly unique name. We assign the button code to our variable btnJS. Then we use stritran to replace our button label text with our session variable. Then, assign it back to e.tmpl.controls[1].precalc.buttonObjectJavascript.

It actually works!

[2ninerniner2]

Re: How can I dynamically make an action button text change?

Jay -

Had to try this and yep, it sure is odd:

dynamic_button_test1.jpg

Works as intended in a Tabbed UI Button but copy and paste the code from the same HTML editor into an Action Button and ... nope

This is one of the "strange ways" of A5 ... what works in one place, won't (doesn't) in another. It's the same user interface for both button text entries, yet there is nothing there to indicate what will work where

David -

Will have to give that a go :)

Cheers!
Lyle

[Steve Workings]

Re: How can I dynamically make an action button text change?

If it works for you to set the button text in the OnGridExecute event, you could do something like this:

oldText = <<%a%
html: 'Test'%a%

newText = <<%a%
html: 'Replaced'%a%

jtxt = e.tmpl.controls[1].precalc.buttonObjectJavascript
jtxt = stritran(jtxt, oldtext, newText)

e.tmpl.controls[1].precalc.buttonObjectJavascript = jtxt

This assumes the label in design is "Test" and you want to replace it witih "Replaced", but shoving the value of a session variable very simple

Edit: Wait - this is just what David suggested. Gonna leave this here anyway. I didn't read enough before I did this.

[Jay Talbott]

Re: How can I dynamically make an action button text change?

Thanks all.
Will give it a try and report back.
Jay

[Jay Talbott]

Re: How can I dynamically make an action button text change?

I must be visually impaired. I do not see e.tmpl.controls in the watch window of the OnGridExecute event of the grid.
What the heck am I missing?
Thanks.
Jay

[Davidk]

Re: How can I dynamically make an action button text change?

Edit your Grid and, at the bottom, you'll see two tabs... Settings (which is what you're in when the Grid opens for editing) and the other tabs is XBasic. If you look at the XBasic you'll your grid in code. There's lots of stuff in here but you can't change anything. Even if you do it won't hurt, but it won't affect anything. If you scoll down the code you'll see code similar to what's in the posts above.

In the onGridExecute Event, you'll see the notes that talk about stuff you can do... and one of them is to affect the e.tmpl component definition... and that's what we're changing.

If you put a debug(1) statement into the onGridExecute event, you can see the e. object and e.tmpl and e.tmpl.controls etc.

[2ninerniner2]

Re: How can I dynamically make an action button text change?

Although I am keenly interested in the outcome of what will work for this, I am even more interested in why it works in one place (tabbed UI button) but not in another (action button). On the surface (the A5 user interface), there is no rhyme nor reason. Or, is this just the "A5 Way", much like when I was living in Quebec and asked why one is "le" and another is "la" and they invariably replied "well, that's just the way it is."

[Jay Talbott]

Re: How can I dynamically make an action button text change?

Thanks, David.
That was the push I needed.
Here is what I ended up using, and it works great:

e.tmpl.controls[1].precalc.buttonObjectJavascript = <<%str1%
window['{grid.componentName}_BUTTONS_BUTTONBREAKFAST'] = new A5.Button({
layout: 'text',
className: '[class.gridButton]',
hoverClassName: '[class.gridButtonHover]',
pressedClassName: '[class.gridButtonPressed]',
disabledClassName: '[class.gridButtonDisabled]',
html: %str1%

e.tmpl.controls[1].precalc.buttonObjectJavascript = e.tmpl.controls[1].precalc.buttonObjectJavascript+"'Copy to all "+session.meal1+"s'"
e.tmpl.controls[1].precalc.buttonObjectJavascript = e.tmpl.controls[1].precalc.buttonObjectJavascript+<<%str2%
,
onClick: function() {
},
theme: '{grid.style}'
});%str2%

although I am sure I can cut this back drastically per your instructions above. I just wanted to make sure it worked first, which is does. Now to improve the form....
Jay

[Davidk]

Re: How can I dynamically make an action button text change?

living in Quebec and asked why one is "le" and another is "la"

In school, I never, ever understood how to tell if a word was masculine or feminine. I always felt it was a language you needed to live in, in order to understand it. C'est la vie.

[agillbb]

Re: How can I dynamically make an action button text change?

Alternate way...publish your session var in the grid (in properties), then put this onGridRenderComplete (javascript):

var myPointer = {grid.componentName}_BUTTONS_SHOWMARKERS //name of buttom
if (myPointer) {
myPointer.html = 'My session var is: ' + {grid.Object}.getSessionVariable('USERCODE'); //session var
myPointer.refresh(); //refresh the button
}

I prefer this to explicitly referring to control[1], plus it is handy to have the session variable in the client-side (javascript) environment anyways.

Andy.