HT for Web PropertyPane Manual



The HT for Web provides a property panel component that enhances the presentation and operation of the ht.widget.PropertyView component, providing visual switching sorting, filtering, and grouping interface functions.

Using the property panel component requires the introduction of the ht.js core library and the introduction of a ht-propertypane.js property panel plug-in library.

PropertyPane Component

ht.widget.PropertyPane is a property panel class whose constructors can input ht.DataModel object whose main configurable properties and functions are as follows:

<!DOCTYPE html>
        <meta charset="UTF-8">   
            html, body {
                padding: 0px;
                margin: 0px;                
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;

        <script src="../../../../lib/core/ht.js"></script> 
        <script src="../../../../lib/plugin/ht-propertypane.js"></script>   
            function init(){                                                                
                dataModel = new ht.DataModel();
                tablePane = new ht.widget.TablePane(dataModel);
                propertyPane = new ht.widget.PropertyPane(dataModel);                    
                splitView = new ht.widget.SplitView(tablePane, propertyPane, 'h', 0.6);                                

                view = splitView.getView();
                view.className = 'main';
                window.addEventListener('resize', function (e) {
                }, false);   

                var attributes = [
                        name: 'id',
                        displayName: 'Id'                        
                        name: 'superClass',
                        displayName: 'Super Class',   
                        categoryName: 'Class',
                        getValue: function(data){
                            var superClass = data.getClass().superClass;
                            return superClass.getClassName ? superClass.getClassName() : 'Object';
                        name: 'className',
                        displayName: 'Class',
                        categoryName: 'Class'
                        name: '_image',                        
                        displayName: 'Image',  
                        categoryName: 'Image',
                        accessType: 'field',
                        width: 110
                        name: 'icon',
                        displayName: 'icon',  
                        categoryName: 'Image',
                        width: 120,
                        enum: {
                            values: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon'], 
                            icons: ['node_icon', 'edge_icon', 'group_icon', 'shape_icon', 'subGraph_icon', 'grid_icon']


                [ht.Data, ht.Node, ht.Edge, ht.Group, ht.Grid, ht.Shape, ht.SubGraph, ht.Grid].forEach(function(clazz){
                    data = new clazz();

    <body onload="init();">

Welcome to contact us