Saving data in embedded UX component

[CampnJim]

I have a main UX component with multiple UX's attached to a tab control. How can I save the data on the embedded UX's from a single Save button on the main UX?

I'm really hoping my customers don't have to click save on each tab.

[Davidk]

Re: Saving data in embedded UX component

Your embedded UX components are Objects. Once you get a pointer to an object, you can call methods for that object.

In the code for your main Save button add the code which will get a pointer to each child UX Object... and then call the submit method for each object.

When you embed a UX you can give that embedded object an Alias... you must do this. You'll find that property in the Embedded Object control.

Your code will be something like...

var obj = {dialog.Object}.getChildObject('myChildUX');
obj.submit();

[TheSmitchell]

Re: Saving data in embedded UX component

I ran across these videos this morning. They cover what David suggests:

http://www.ajaxvideotutorials.com/V1...AndChild_1.swf
http://www.ajaxvideotutorials.com/V1...AndChild_2.swf

{dialog.Object}.getChildObject('alias'[,component_type]) works for both Embedded components and components you may open through other means. There are placeholder objects for objects embedded in a UX (eg, {dialog.embeddedUX_MYUXALIAS}), but they don't work for components opened in new tabs/windows/DIVs/etc.

[CampnJim]

Re: Saving data in embedded UX component

Great, thanks for the help, it's working as planned now.
Now I'd like to know if there's a way to have the 'Submit' button on the main form become active if on the the embedded UX controls are dirty. After that I think I'll be set.

[TheSmitchell]

Re: Saving data in embedded UX component

Great, thanks for the help, it's working as planned now.
Now I'd like to know if there's a way to have the 'Submit' button on the main form become active if on the the embedded UX controls are dirty. After that I think I'll be set.

You could add code in all the child UX components to call code in the parent UX to enable the submit button. Much like calling submit on all the child items, but you would use the "getParentObject" function instead of the "getChildObject".

// In the child UX:
var po = {dialog.object}.getParentObject();
if (po) {
  if ({dialog.object}.isDirty) {
    po.setDisabled('SUBMITBUTTON',false);
  }
}

I think you can leverage either the onDataStateChange or onStateChange events in the UX to call your code depending on how you want the Submit button enabled. If the components in your UX are bound to a table, I would recommend using onDataStateChange instead of onStateChange. It will fire only when your data bound control states change, as opposed to any control's state changing. You will still want to check the e.isDirty and/or e.isDataDirty elements as these events will fire when the UX is changed from dirty to clean.

If you have a reset button, you'll want to put your code in to disable the submit button there. And you probably want to make sure this only happens in the parent UX, however, as you would need to add knowledge of all the child components the parent UX could have to all the children to do this from the children.

If this was my UX, I would define a function in the parent UX in the onRenderComplete client-side event:

{dialog.object}._functions.enableSubmit = function () {
  var child1 = {dialog.object}.getChildObject('AliasOfCHILD1');
  var child2 = {dialog.object}.getChildObject('AliasOfCHILD2');
  var dlgIsDirty = ((child1)?child1._isDataDirty:false) || ((child2)?child2._isDataDirty:false);

  // this is a bit backwards; if any child is dirty, then we should NOT disable the submit button
  {dialog.object}.setDisabled('SUBMITBUTTON', !dlgIsDirty));
}

And in the children, I would add this to the on[Data]StateChange event(s) or wherever I deemed it appropriate:

var po = {dialog.object}.getParentObject();
if (po && typeof (po._functions.enableSubmit) !== undefined) {
  po._functions.enableSubmit();
}

Good luck.

[mikeallenbrown]

Re: Saving data in embedded UX component

I have multiple embedded UX's in various panels. I've tried a couple different ways to get my child objects to submit but can't seem to get it right. I'm not JS savvy enough and maybe someone could help me out here?

Here is what I've tried in my submit button...

[COLOR="#FF0000"]Only the very first one saves (objDag)[/COLOR]

var objSub = {dialog.Object}.getChildObject('EMBD_SUBSCRIBERS');
var objGen = {dialog.Object}.getChildObject('EMBD_GENERAL');
var objDag = {dialog.object}.getChildObject('EMBD_DIAGCODES');


if(objDag) {
	objDag.submit();
} else if(objGen) {
	objGen.submit();
} else if(objSub){
	objSub.submit();
}

[COLOR="#FF0000"]This doesn't work at all...matter-a-fact it breaks all the child components[/COLOR]

var objSub = {dialog.Object}.getChildObject('EMBD_SUBSCRIBERS');
objSub.submit();

var objGen = {dialog.Object}.getChildObject('EMBD_GENERAL');
objGen.submit();

var objDag = {dialog.object}.getChildObject('EMBD_DIAGCODES');
objDag.submit();

[David Brown]

Re: Saving data in embedded UX component

does anybody know the solution to mikes issue? I also have multiple child uxs and none of them save using var
co = {dialog.object}.getChildObject('CHILDALIAS','ux');
co.submit();

[Davidk]

Re: Saving data in embedded UX component

Not a lot of information to go on but I've tested this again and all looks ok. I've got a child UX embedded into a parent UX. Both data bound. I make a change to data in the child UX, then click my Parent UX button to submit the child UX using this code...

var cObj = {dialog.Object}.getChildObject('UXCHILDEMBEDDED');
cObj.submit();

So... there's probably something else involved that's not being reported in the posts. Posting an example that fails would help. Any Javascript errors? Are the embedded components rendered at the time they're submitted?

[mikeallenbrown]

Re: Saving data in embedded UX component

does anybody know the solution to mikes issue? I also have multiple child uxs and none of them save using var
co = {dialog.object}.getChildObject('CHILDALIAS','ux');
co.submit();

I don't remember the circumstances surrounding this but I'm sure it was an error on my part. What David posted works.

[David Brown]

Re: Saving data in embedded UX component

Thanks for the replys.

I got it working. At first I was using {dialog.object}.submit(); before the code which I guess was causing it not to work.
My code was:
'==================
{dialog.object}.submit();
co = {dialog.object}.getChildObject('CHILDALIAS','ux');
co.submit();
'==================

To get it to work I move the last two lines to a separate javascript function and set it to run after the save event.