Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

  • Portal Dashboard Testing Layouts


    Trying to create VLayout type Portal Node that contains a simple Button creation and adding it to the Dashboard show case exanple

    https://www.smartclient.com/smartcli...ortalDashboard

    we added a TestLayout to ListPallets data
    Code:
    ,
        {
            title:"TestLayout",
            type:"VLayout",
            defaults: {
                width: "100%",
                height: "100%", 
                autoDraw:false,                    
                members: [
                  isc.IButton.create()
                ]
            }
        }
    but now every time we drag the TestLayout into the Pallete EditPane the IButton moves to the last created TestLayout

    not sure if the dashboard was meant for creating custom layouts


    here is the full test case :
    Code:
    // Palette Node used to create a default portal
    var initialPortalPaletteNode = {
        type: "PortalLayout",
        defaults: {
            width: "100%",
            height: "100%",
            canResizePortlets: true
        }
    };
    
    // Grid to display the list of available dashboards
    isc.ListGrid.create({
        ID: "dashboardList",
        dataSource: "dashboards",
        autoFetchData: true,
        selectionType: "single",
        sortField: "description",
        leaveScrollbarGap: false,
    
        // Allow edit of portal description (via context menu)
        canEdit: true,
        editEvent: "none",
        // And removal of dashboards
        canRemoveRecords: true,
    
        fields: [ { name: "description" } ],
    
        cellContextMenuConstructor: "Menu",
        cellContextClick : function (record, rowNum, colNum) {
            // create the cellContextMenu if necessary
            if (!this.cellContextMenu) {
                this.cellContextMenu = this.createAutoChild("cellContextMenu");
            }
            var menuItems = [
                { title : "Rename", rowNum: rowNum, click : "target.startEditing(item.rowNum)" },
                { isSeparator: true },
                { title : "Edit", click : "target.clearCurrentDashboard(); target.editDashboard()" },
                { title : "Clone", click : "target.clearCurrentDashboard(); target.cloneDashboard()" }
            ];
            this.cellContextMenu.setData(menuItems);
            this.cellContextMenu.showContextMenu(this);
    
            // return false to kill the standard context menu
            return false;
        },
    
        recordDoubleClick : function (viewer, record, recordNum, field, fieldNum, value, rawValue) {
            viewer.clearCurrentDashboard();
            viewer.viewDashboard();
        },
    
        clearCurrentDashboard : function () {
            editPane.destroyAll();
            editPane.hide();
            editToolbar.hide();
        },
    
        editDashboard : function () {
            var record = this.getSelectedRecord();
            if (record) {
                editPane.setPortal(record.layout);
                editPane.show();
                editToolbar.show();
                this.showPalette();
            }
            this._currentRecord = record;
        },
    
        viewDashboard : function () {
            var record = this.getSelectedRecord();
            if (record) {
                editPane.addPaletteNodesFromXML(record.layout);
                editPane.show();
                editToolbar.hide();
                this.hidePalette();
            }
            this._currentRecord = record;
        },
    
        newDashboard : function () {
            this.clearCurrentDashboard();
            this._currentRecord = null;
    
            // Add a PortalLayout to the editPane
            editPane.setInitialPortal(initialPortalPaletteNode);
            editPane.show();
            editToolbar.show();
            this.showPalette();
    
            this.saveDashboard();
        },
    
        cloneDashboard : function () {
            var record = this.getSelectedRecord();
            if (record) {
                this.cloneRecord(record);
            }
        },
    
        showPalette : function () {
            selector.enableTab(1);
            selector.selectTab(1);
        },
    
        hidePalette : function () {
            selector.disableTab(1);
            selector.selectTab(0);
        },
    
        refreshDashboard : function () {
            this.clearCurrentDashboard();
            this.editDashboard();
        },
    
        saveDashboard : function () {
            var editNodes = editPane.serializeAllEditNodes({ indent: false });
    
            if (this._currentRecord) {
                this._currentRecord.layout = editNodes;
                this.updateData(this._currentRecord);
            } else {
                var grid = this;
                this.addData({ description: "New dashboard", layout: editNodes }, function (response, data, request) {
                    if (data && data.length > 0) {
                        grid.selectSingleRecord(data[0]);
                        grid._currentRecord = data[0];
                    }
                });
            }
        },
    
        cloneRecord : function (record) {
            this.addData({ description: record.description, layout: record.layout});
        }
    });
    
    isc.IButton.create({
        ID: "viewButton",
        title: "View",
        autoFit: true,
        click : function () {
            dashboardList.clearCurrentDashboard();
            dashboardList.viewDashboard();
        }
    });
    
    isc.IButton.create({
        ID: "editButton",
        title: "Edit",
        autoFit: true,
        click : function () {
            dashboardList.clearCurrentDashboard();
            dashboardList.editDashboard();
        }
    });
    
    isc.IButton.create({
        ID: "newButton",
        title: "New",
        autoFit: true,
        click : function () {
            dashboardList.newDashboard();
        }
    });
    
    isc.IButton.create({
        ID: "cloneButton",
        title: "Clone",
        autoFit: true,
        click : function () {
            dashboardList.cloneDashboard();
        }
    });
    
    isc.HLayout.create({
        ID: "selectToolbar",
        height: 30,
        membersMargin: 10,
        defaultLayoutAlign: "center",
    
        members: [
            isc.LayoutSpacer.create(),
            viewButton,
            editButton,
            newButton,
            cloneButton
        ]
    })
    
    isc.VLayout.create({
        ID: "selectLayout",
        members: [
            dashboardList,
            selectToolbar
        ]
    });
    
    
    // The ListPalette contains components available
    // for use, with default settings.
    isc.ListPalette.create({
        ID: "listPalette",
        leaveScrollbarGap: false,
    
        // The regular ListGrid property
        fields: [
            {name: "title", title: "Component"}
        ],
    
        // We are supplying the component data inline for this example.
        // However, ListPalette is a subclass of ListGrid, so you could
        // also use a dataSource.
        data: [{
            title: "Animals", 
            type: "ListGrid", 
            defaults: {
                dataSource: "animals",
                autoFetchData: true,
                showFilterEditor: true
            }
        },{
            title: "Supply Categories", 
            type: "ListGrid", 
            defaults: {
                dataSource: "supplyCategory",
                autoFetchData: true,
                showFilterEditor: true
            }
        },{
            title: "Supply Items", 
            type: "ListGrid", 
            defaults: {
                dataSource: "supplyItem",
                autoFetchData: true,
                showFilterEditor: true
            }
        },
        {
        title:"TestLayout",
        type:"VLayout",
        defaults: {
            width: "100%",
            height: "100%", 
            autoDraw:false,                    
            members: [
              isc.IButton.create()
            ]
        }
         }
    ]
    });
    
    isc.TabSet.create({
        ID: "selector",
        height: "100%",
        tabs: [
            {title: "Dashboards", pane: selectLayout },
            {title: "Palette", pane: listPalette, disabled: true }
        ]
    });
    
    isc.EditPane.create({
        ID: "editPane",
        visibility: "hidden",
        extraPalettes: isc.HiddenPalette.create({
            data: [
               { title: "ListGridField", type: "ListGridField" }
            ]
        }),
        setInitialPortal : function (paletteNode) {
            var editNode = this.addFromPaletteNode(paletteNode);
            this.getEditContext().defaultParent = editNode;
        },
        setPortal : function (xml) {
            var editContext = this.getEditContext(),
                editTree = editContext.getEditNodeTree(),
                rootNode = editContext.getRootEditNode()
            ;
            this.addPaletteNodesFromXML(xml, null, null, function (paletteNodes) {
                // PortalLayout is assumed to be the first node under root.
                var childNodes = editTree.getChildren(rootNode),
                    editNode = (childNodes && childNodes.length > 0 ? childNodes[0] : null)
                ;
                editContext.defaultParent = editNode;
            });
        }
    });
    
    // Make the new editPane the default Edit Context for the palette,
    // to support double-clicking on components in the palette to create them
    listPalette.setDefaultEditContext(editPane);
    editPane.setDefaultPalette(listPalette);
    
    // Add a PortalLayout to the editPane
    editPane.setInitialPortal(initialPortalPaletteNode);
    
    isc.IButton.create({
        ID: "saveButton",
        title: "Save",
        autoFit: true,
        click : function () {
            dashboardList.saveDashboard();
        }
    });
    
    isc.IButton.create({
        ID: "discardButton",
        title: "Discard changes",
        autoFit: true,
        click : function () {
            dashboardList.refreshDashboard();
        }
    });
    
    isc.HLayout.create({
        ID: "editToolbar",
        height: 30,
        membersMargin: 10,
        defaultLayoutAlign: "center",
        visibility: "hidden",
    
        members: [
            isc.LayoutSpacer.create(),
            saveButton,
            discardButton
        ]
    })
    
    isc.VLayout.create({
        ID: "dashboardLayout",
        width: "100%",
        height: "100%",
        members: [
            editPane,
            editToolbar
        ]
    });
    
    isc.SplitPane.create({
        ID: "splitPane",
        width: "100%",
        height: "100%",
        showLeftButton:true,
        showRightButton:false,
        detailPane: dashboardLayout,
        navigationPane: selector,
        navigationTitle: "Selector"
    });

  • #2
    Usage issue: what you've placed in the palette default is *settings* for a VLayout which contain one specific already-created IButton instance. So each time these settings are used to create a VLayout, it tries to use the same button instance, which means it ends up stealing it from the previously created instance.

    You can either:

    1. turn the button.create() call into just settings for an IButton as well, rather than a create() call. Layouts support this.

    OR

    2. make a subclass of VLayout that generates your button (and whatever other components) when it is created, then provide settings for that class instead of just for a VLayout.

    Comment


    • #3
      we worked it out with the SubClass thank you

      Comment

      Working...
      X