What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

[dougeven]

Hi,

I'm attempting to build an easy way to input time for a mobile app. The app has several time input controls where the user must supply a time that looks like this: 12:30 PM.

The time picker functionality built in for use with 'short-time' data type fields does not seem to work on mobile devices, at least it doesn't work in my testing on an iOS device (an iPad Mini). I've found discussion of this on the forum here: http://www.alphasoftware.com/alphafo...61-Time-picker

As someone mentioned in the forum post (linked above), a pop-up window containing a series of spinlist controls seems to be an effective approach and so I'm attempting to implement one. I've got the time input spinlist controls inside a Window Container and all seems fine, but I'm looking for a way to access the time data that is inside the time input control that is currently being edited. I thought that passing in 'this' to the showContainerWindow function (like this: {dialog.object}.showContainerWindow({this},'WINDOW_TIMEINPUT');) would give me access to the current value of the time control so that I could set the value of the spinlist controls to match by using 'this.value' (or something like that) inside the Window Container's onShow or onBeforeShow Javascript events. But I am at a loss as to how to access the 'this' object that is passed in.

How do I use 'this' inside the Javascript events for the Window Container? Or am I wrong-headed about what 'this' is?

Thanks for any help.

[TheSmitchell]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

Hi,

I'm attempting to build an easy way to input time for a mobile app. The app has several time input controls where the user must supply a time that looks like this: 12:30 PM.

The time picker functionality built in for use with 'short-time' data type fields does not seem to work on mobile devices, at least it doesn't work in my testing on an iOS device (an iPad Mini). I've found discussion of this on the forum here: http://www.alphasoftware.com/alphafo...61-Time-picker

As someone mentioned in the forum post (linked above), a pop-up window containing a series of spinlist controls seems to be an effective approach and so I'm attempting to implement one. I've got the time input spinlist controls inside a Window Container and all seems fine, but I'm looking for a way to access the time data that is inside the time input control that is currently being edited. I thought that passing in 'this' to the showContainerWindow function (like this: {dialog.object}.showContainerWindow({this},'WINDOW_TIMEINPUT');) would give me access to the current value of the time control so that I could set the value of the spinlist controls to match by using 'this.value' (or something like that) inside the Window Container's onShow or onBeforeShow Javascript events. But I am at a loss as to how to access the 'this' object that is passed in.

How do I use 'this' inside the Javascript events for the Window Container? Or am I wrong-headed about what 'this' is?

Thanks for any help.

"this" is a Javascript concept. Depending on how your code is called, "this" can be a number of things. In the context of Javascript events for a Field in the UX component, "this" refers to the field.

Don't put curly braces around "this" in your code. If you want to reference "this" in the Javascript events for a control...

var value = this.value;
alert(value);

The above code may not work in all situations. But this.value usually returns the value of the control - EG, in the click event for a textbox, this.value will give you the value of the textbox.

Read more about "this" here: https://developer.mozilla.org/en-US/...Operators/this

[TheSmitchell]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

I should mention that you can access any number of properties of "this" in the Javascript events.

EG:

this.id returns the value of the ID property of the element
this.style refers to the STYLE property of the element
this["a5-item"] refers to the property "a5-item" of the element

It's the same object you'd get if you called {dialog.object}.getPointer("FIELD_NAME") - for Javascript events on a field. In other situations, such as functions, the value of "this" depends on how the function is invoked.

[dougeven]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

Thanks Sarah. I've benefited from many of your posts on this forum and appreciate your willingness to help. However, my trouble isn't with understanding 'this' in javascript (although it's definitely worth further study), but is instead with understanding whether and how I can reference the 'this' object passed in to the showContainerWindow function.

if I pass in 'this' to the function that opens a Container Window (as in '{dialog.object}.showContainerWindow(this,'WINDOW_TIMEINPUT');') how do I access the 'this' object inside the javascript events of the Container Window that gets opened? Ideally I'd like to be able to reference 'this.value' inside the 'onBeforeShow' event of the window that's opened in order to obtain the value of the textbox control for the time input so I can update controls (the spinlist controls in this case) inside the Container Window. But if I simply use 'this.value' inside the Window Container's onBeforeShow event, 'this' is no longer the 'this' that was passed in to the showContainerWindow function.

By the way, the reason my example code had brackets around the 'this' is because I pulled the code out of the "click action" property of an In-Control button for the textbox that contains the time value I want to edit. According to the help there, "You can use the special {this} placeholder to get a pointer to the textbox object."

Thanks again for the response.

[TheSmitchell]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

By the way, the reason my example code had brackets around the 'this' is because I pulled the code out of the "click action" property of an In-Control button for the textbox that contains the time value I want to edit. According to the help there, "You can use the special {this} placeholder to get a pointer to the textbox object."

Oooooooooooooooh. This is something I was unaware of. I'll check it out and get back to you - unless someone beats me to the punch.

[TheSmitchell]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

if I pass in 'this' to the function that opens a Container Window (as in '{dialog.object}.showContainerWindow(this,'WINDOW_TIMEINPUT');') how do I access the 'this' object inside the javascript events of the Container Window that gets opened? Ideally I'd like to be able to reference 'this.value' inside the 'onBeforeShow' event of the window that's opened in order to obtain the value of the textbox control for the time input so I can update controls (the spinlist controls in this case) inside the Container Window. But if I simply use 'this.value' inside the Window Container's onBeforeShow event, 'this' is no longer the 'this' that was passed in to the showContainerWindow function.

I dug into things a bit for you and this is what I've found.

The first parameter passed into {dialog.object}.showContainerWindow(ele,ContainerID) is only used if the position of the window is relative to the object that invoked the show method. It's not cached anywhere and, as far as I can tell, you can't reference it in the window events.

So, What I would advise is this:

1. In the click event for your custom button, cache the name for the textbox your editing in the {dialog.object} object before you call {dialog.object}.showContainerWindow:

{dialog.object}.__thisTimeName = "MY_TEXTBOX_NAME";
{dialog.object}.showContainerWindow({this},'CONTAINER_ID');

2. In the onBeforeShow event for the window, get a pointer to the textbox (the ID you just cached) and set the value of the spinlist controls:

if ({dialog.object}.__thisTimeName) {
    var name = {dialog.object}.__thisTimeName;
    var value = {dialog.object}.getValue(name);
    alert(value);
    //set value of spin list controls here...
}

3. In the onBeforeHide event, set the value of the textbox and delete the variable that you cached the Name of the control

if ({dialog.object}.__thisTimeName) {
    var name = {dialog.object}.__thisTimeName;

    var value = "";
    // calculate the new time value from the spin list controls

    // set the value in the textbox
    {dialog.object}.setValue(name,value);

    // Delete the cached name - this is to prevent the value
    // from being set in the wrong text box should you use
    // the window container to set the value in more than one
    // time control in your UX component.
    delete {dialog.object}.__thisTimeName;
}

Hope this helps!

[dougeven]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

Hope this helps!

It helps a lot. Thanks!

I had already worked up something very similar to what you recommend here, but your code is simpler in some ways and I will adapt mine accordingly.

Can you elaborate on how you go about "digging" for more information on these Alpha Anywhere methods? I spend way too much time looking thru release notes documents and videos and still come up empty much of the time. Are you using browser development tools like Firebug to dig through javascript source? If so, I would appreciate hearing how you go about it.

In any event, thanks again for jumping in and helping me out on this.

[TheSmitchell]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

Can you elaborate on how you go about "digging" for more information on these Alpha Anywhere methods? I spend way too much time looking thru release notes documents and videos and still come up empty much of the time. Are you using browser development tools like Firebug to dig through javascript source? If so, I would appreciate hearing how you go about it.

I usually use Firebug, but in this instance I used Chrome in Working Preview. You pick the browser used in Working Preview. You're choices are Internet Explorer or Chrome. If you use Chrome, you have access to the Chrome Debugger. You can also detach the Working Preview window and leave it open while you edit your component. I don't use detached Working Preview as often as I probably could.

In the console, you can explore the javascript in {dialog.object}. If you're previewing the component, {dialog.object} is replaced with DLG1_DlgObj. It's an object in the global namespace. You can reference it in the console window like this (NOTE: stuff entered on the console is preceded with a >. The output/result of executing the stuff in the console is preceded with a <.):

> DLG1_DlgObj
< klass {dialogId: "DLG1", ajaxURL: "a5res://a5wobject/__hidden__VarTemp125241144_GridSettings", _embeddedMode: true, _livePreviewInBuilder: false, componentGUID: "0f29949f-dd7a-4878-8580-4b262b7f004d"…}

One nice thing about using Chrome is that it will print the implementation of a function for you if you omit the parentheses. If you wanted to see what happened to the element you pass to showContainerWindow, you can find out by printing the function implementation:

> DLG1_DlgObj.showContainerWindow
< function (ele,containerName) {
		
          //don't confuse with closeContainerWindow() which has nothing to do with 'containers' that have a sub-type of 'window'
          this._functions['_showContainerWindow_' + containerName.toUpperCase()](ele);
     }

Reading the above result, you can see that showContainerWindow passes the first parameter (eg, your {this} object) through to another function defined in the {dialog.object}._functions object. The name of this method is _showContainerWindow_CONTAINER_NAME. If your container's name is "WINDOW_1", then the function is "_showContainerWindow_WINDOW_1". You can see how this is defined, as well:

> DLG1_DlgObj._functions._showContainerWindow_WINDOW_1
< function (objEle) {
     var currWindow = DLG1_DlgObj.getWindow('DLG1_CONTAINERWINDOW_WINDOW_1');
     if(typeof DLG1_DlgObj._openWindows == 'undefined') DLG1_DlgObj._openWindows = {};
     DLG1_DlgObj._openWindows['WINDOW_1'] = currWindow;
     currWindow.show();
     }

I know from the documentation for showContainerWindow that passing in an element as the first parameter to showContainerWindow will let you position the popup relative to the element. If you don't provide the element, then the relative positioning won't work. However, it wasn't clear if the element could be referenced within the window. In the case above, WINDOW_1 isn't configured to show relative to anything (the position was left unchanged from the default.) Seeing as objEle isn't referenced at all in this implementation, it's pretty obvious it isn't cached. The only time I've seen the objEle parameter referenced is when the window is configured to show relative to the element that invokes the popup.

You can also just search the source (eg, javascript) in the project on the Source tab. Searching for showContainerWindow should eventually take you to where that code is defined. Then you can follow the function calls within down the line. And any function's implementation can be dumped as a string using the toString() method for the function. Useful in certain situations. EG:

> DLG1_DlgObj.showContainerWindow.toString()
< "function (ele,containerName) {
		
          //don't confuse with closeContainerWindow() which has nothing to do with 'containers' that have a sub-type of 'window'
          this._functions['_showContainerWindow_' + containerName.toUpperCase()](ele);
     }"

[dougeven]

Re: What is proper use of 'this' in showContainerWindow(this, 'CONTAINER_1')?

That's very helpful! Thanks for the extensive explanations. I have underutilized the power of the console for sure.