function func(self) {
    return [
        {
            name: 'tablewidgt',
            type: 'TabWidget',
            property: {stylesheet:"QTabWidget{background-color:red}"},
            pack: { stretch: 1 },

            child: [
                {
                    name: 'userinfo_page',
                    type: 'ScrollArea',
                    property: { widget_resizable: true, frame_shape: 'NoFrame'},
                    pack: { label: self.ttr("User Information") },
                    child: {
                        name: 'formlayout',
                        type: 'FormLayout',
                        property: { label_alignment: 'AlignRight', margin: 20, vertical_spacing: 10, horizontal_spacing: 20 },
                        pack: {},
                        child: [
                            {
                                name: 'id',
                                type: 'LineEdit',
                                title: self.ttr('ID'),
                                property: { enabled: false },
                                pack: { label: self.ttr('ID') },
                                state: function(obj) {
                                    return "Hide";
                                }
                            },
                            {
                                name: 'username',
                                type: 'LineEdit',
                                title: self.ttr('Login Name'),
                                property: {},
                                pack: { label: self.ttr('Login Name') },
                                validate: function (obj, val, title, moment, self) {
                                    if (val.trim() == '') {
                                        return [title + self.ttr(" can not be null"), 'Error'];
                                    } else if (!val.match(new RegExp('^[A-Za-z0-9_]+$'))) {
                                        return [title + self.ttr(" can only contain [A-Za-z0-9]!"), 'Error'];
                                    }
                                },
                            },
                            {
                                name: 'password',
                                type: 'LineEdit',
                                title: self.ttr('Password'),
                                property: { echo_mode: 'Password' },
                                pack: { label: self.ttr('Password') },
                                state: function(obj,self) {
                                    return 'Hide';
                                }
                            },
                            {
                                name: 'fullname',
                                type: 'LineEdit',
                                title: self.ttr('Full Name'),
                                property: {},
                                pack: { label: self.ttr('Full Name') },
                                validate: 'NOTNULL'
                            },
                            {
                                name: 'staffid',
                                type: 'LineEdit',
                                title: self.ttr('Staff ID'),
                                property: {},
                                pack: { label: self.ttr('Staff ID') },
                            },
                            {
                                name: 'contcat_id',
                                type: 'LineEdit',
                                property: { enabled: false },
                                state:  function(obj,self) {
                                    return 'Hide';
                                }
                            },
                            {
                                name: 'mail',
                                type: 'LineEdit',
                                title: self.ttr('Mail'),
                                property: {},
                                validate: function (obj, val, title, moment) {
                                    if (val != '') {
                                        var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                                        if (!filter.test(val)) {
                                            return [self.ttr("invalid mail format"), 'ERROR']
                                        }
                                    }
                                },
                                pack: { label: self.ttr('Mail') },
                            },
                            {
                                name: 'remark',
                                type: 'PlainTextEdit',
                                title: self.ttr('Remark'),
                                property: { vertical_scroll_bar_policy: 'ScrollBarAlwaysOff' },
                                pack: { label: self.ttr('Remark') },
                            },
                            {
                                name: 'status',
                                type: 'ComboBox',
                                title: self.ttr('Status'),
                                property: { item_list: TOPENM.enumList("sys-user-status").toComboList() },
                                pack: { label: self.ttr('Status') },
                                validate: function (obj, val, title, moment, self) {
                                    if (val.trim() == '') {
                                        return [title + self.ttr(" can not be null"), 'Error'];
                                    }
                                }
                            },
                            {
                                name: 'attr_data.password_validity_control',
                                type: 'CheckBox',
                                title: self.ttr('Password Validity Control'),
                                property: {},
                                pack: { label: self.ttr('Password Validity Control') },
                                // getter : function(obj, self) {
                                //     return obj.getData("current_names");
                                // },
                                // setter: function(obj,value,self){
                                //     obj.setData("current_names", value);                                    
                                // },
                                callback: function (obj, checked, self) {
                                    if (checked) {
                                        this.setState("attr_data.validity_period", "show");
                                    } else {
                                        this.setState("attr_data.validity_period", "hide");
                                    }
                                },
                                setter: function (obj, value, self) {
                                    if (value === 1 || value == true || value === 'on' || value === 'yes') {
                                        obj.setIntValue(1);
                                        this.setState("attr_data.validity_period", "show");
                                    } else {
                                        obj.setIntValue(0);
                                        this.setState("attr_data.validity_period", "hide");
                                    }
                                },
                                state: function (obj, self) {
                                    if (APP.hasRight("sys-user-password-validity-control")) {
                                        return 'Show';
                                    } else {
                                        return 'Hide';
                                    }
                                }
                            },
                            {
                                name: 'attr_data.validity_period',
                                type: 'IntLineEdit',
                                title: self.ttr('Validity Period'),
                                property: { min_value: 0 },
                                pack: { label: self.ttr('Validity Period') },
                                state: function (obj, self) {
                                    if (APP.hasRight("sys-user-password-validity-control") &&
                                        this.getValue('attr_data.password_validity_control') == 1) {
                                        return 'Show';
                                    } else {
                                        return 'Hide';
                                    }
                                },
                                child: [
                                    {
                                        name: "validity_period_unit",
                                        type: "Label",
                                        property: {
                                            text: "  " + self.ttr('Month') + "  ",
                                            alignment: "HCenter|VCenter",
                                            fixed_height: 26,
                                            stylesheet: "background-color: white;border-left: 1px solid lightgray;"
                                        }
                                    }
                                ]
                            },
                            {
                                name: 'product_category',
                                type: 'MultiComboBox',
                                title: self.ttr('Product Category'),
                                property: { item_list: TOPENM.enumList("sys-product-category").toComboList(), name_format: 'A,B' },
                                pack: { label: self.ttr('Product Category') },
                                getter : function(obj, self)
                                {
                                    return obj.getData("current_names");
                                },
                                setter: function(obj,value,self){
                                    obj.setData("current_names", value);                                    
                                },
                                state: function(obj, self) {
                                    return 'hide';
                                }
                            }
                        ]
                    }
                },
                {
                    name: 'ROLE_PAGE',
                    type: 'VBoxLayout',
                    property: { spacing: 0, margin: 0 },
                    pack: { label: self.ttr("Role") },
                    child: [
                        {
                            name: 'role_toolbar',
                            type: 'ToolBar',
							property: {style:"size=normal" ,spacing: 0, margin: 0},
                            pack: {},
                            child: [
                                {
                                    name: 'plus-circle',
                                    type: 'Action',
                                    property: { text: self.ttr('Add Role'), icon: 'plus-circle', shortcut: '', tooltip: '',style:' button_style=both' },
                                    callback: function (obj, checked, self) {
                                        self.showAddRoleDialog();
                                    },
                                },
                                {
                                    name: 'act_remove_role',
                                    type: 'Action',
                                    property: { text: self.ttr('Remove Role'), icon: 'minus-circle', shortcut: '', tooltip: '',style:'button_style=both' },
                                    callback: function (obj, checked, self) {
                                        this.getObject('ROLE_LIST').removeSelectedRows();
                                    },
                                    state: function (obj, self) {
                                        var selectionData = [];
                                        selectionData = this.getObject("ROLE_LIST").selectedRowDataMaps();
                                        if (selectionData.length > 0) {
                                            return 'enable';
                                        } else {
                                            return 'disable';
                                        }
                                    }
                                },
								{
                                    name: 'tool_bar_separator',
									type:'Separator'
								}
                            ]
                        },
                        {
                            name: 'ROLE_LIST',
                            type: 'TableView',
                            property: {},
                            pack: {},
                            setter: function (obj, value) {
                                if (value == null) {
                                    value = [];
                                }
                                obj.loadData(value);
                            },
                            initCallback: function (obj) {
                                obj.setHeaderItem(
                                    [
                                        { name: 'id', displayRole: '$id' },
                                        { name: 'name', display: self.ttr('Role Name'),resizeMode: 'Interactive',displayRole: '$name',search:'int'},
                                        { name: 'description', display: self.ttr('Description'),resizeMode: 'Stretch',displayRole: '$description',search:'string'},
                                    ]
                                );
                                obj.setData('data_keys',["id", "name", "description"]);
                                obj.setData("sort_indicator_shown", false);
                            },
                        }
                    ]
                }
            ]
        },
    ];
}