PortalLayout Component Saving Layout

[zhanghuancs]

SmartClient Ajax RIA system
Enterprise Version v9.1p_2014-05-23 (2014-05-23)

We just updated SmartClient to Enterprise version.

If we have a PortalLayout, after user drag and drop, how I should save the new layout?

I think enterprise have this feature but I'm not be able to find it.

The general idea is we have a TabSet, which contains multiple Tab, each Tab's pane is a PortalLayout, which we can add multiple Portlets inside.

isc.TabSet.create({
    ID: "tabSet",
    tabs: [
        {
          title: "tab1", 
          pane: isc.PortalLayout.create({
                     ID: "portal",
                     portlets: [
                           isc.Portlet.create({
                               title: "Portlet 1"
                           }),
                           isc.Portlet.create({
                               title: "Portlet 2"
                           })
                    ]
         });
       }
    ]
});

How can the above application uses EditPane to save the layout information.

Thanks

[Isomorphic]

Take a look at the Dashboards & Tools sample folder - there are multiple samples demonstrating this.

[zhanghuancs]

Take a look at the Dashboards & Tools sample folder - there are multiple samples demonstrating this.

I did look at those examples. It seems that the portal layout has persistent state. But if I embed portal layout to the tab, and then the tab sets, does the tab sets as a whole has the persistent state?

If I'm wrong, please correct me. Only the components defined in the palette can have the persistent state? Like If I only have portal layout, no palette and I add the portlet on fly, can those added-on-fly portlet has persistent state?

Thanks for your response.

[Isomorphic]

The components which will be persisted are those added to an EditContext. In the sample, you can see the PortalLayout being added to an EditPane, which has an EditContext.

Once a component has been added to an EditContext, it's subcomponents are also automatically persisted. You can see this happening in the Portal Dashboard sample, where settings on grids inside Portlets are persisted.

[zhanghuancs]

The components which will be persisted are those added to an EditContext. In the sample, you can see the PortalLayout being added to an EditPane, which has an EditContext.

Once a component has been added to an EditContext, it's subcomponents are also automatically persisted. You can see this happening in the Portal Dashboard sample, where settings on grids inside Portlets are persisted.

I made the TabSet resides on an EditPane, and each time when I add a tab on fly, the EditContext.seriealizeAllEditNodesASJSON() updates to have the newly added tab node. This part works.

Then I tried to set a PortalLayout as the pane to the TabSet.getSelectedTab(), after calling TabSet.setTabPane(tab, pane), the PortalLayout is successfully added as a pane in the selected tab. When I call EditContext.seriealizeAllEditNodesASJSON(), a "pane" adds to the tab, but it is an empty object. The configuration for the pane does not added into it. I wonder what I should do to make the pane configuration added to the serialization data. Because later on we want to use the serialized data to redraw the whole layout.

Follwoing is what I got when I first initialize the layout with only one tab inside the tabset.

[
    {
        "autoDraw":false, 
        "ID":"TabSet0", 
        "width":"100%", 
        "height":"100%", 
        "tabs":[
            {
                "title":"tab1", 
                "baseStyle":"tabButtonTop", 
                "ariaRole":"tab", 
                "iconSize":16
            }
        ], 
        "_constructor":"TabSet"
    }

Then I added a new tab on fly by clicking a button. I got following:

[
    {
        "autoDraw": false,
        "ID": "TabSet0",
        "width": "100%",
        "height": "100%",
        "tabs": [
            {
                "title": "tab1",
                "baseStyle": "tabButtonTop",
                "ariaRole": "tab",
                "iconSize": 16
            },
            {
                "title": "Tab2",
                "pane": null,
                "baseStyle": "tabButtonTop",
                "ariaRole": "tab",
                "iconSize": 16
            }
        ],
        "_constructor": "TabSet",
        "left": 0,
        "top": 0
    }
]

Following is what I got after setTabPane to the selected tab in the tabset. "pane":{} is added inside "tab1", but it just an empty object, no any other portalLayout configuration added in.

[
    {
        "autoDraw": false,
        "ID": "TabSet0",
        "width": "100%",
        "height": "100%",
        "tabs": [
            {
                "title": "tab1",
                "baseStyle": "tabButtonTop",
                "ariaRole": "tab",
                "iconSize": 16,
                "pane": {}
            },
            {
                "title": "Tab2",
                "pane": null,
                "baseStyle": "tabButtonTop",
                "ariaRole": "tab",
                "iconSize": 16
            }
        ],
        "_constructor": "TabSet",
        "left": 0,
        "top": 0
    }
]

Do I need make two separate editContext, one for TabSet, the Other for each tab's pane? Not sure what else should I do to make this hierarchy layout saved.

Thanks.

[Isomorphic]

Only component added via the EditContext are tracked as serializable. Use addNode() to add the PortalLayouts to the tabs.