cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
1475
Views
2
Helpful
3
Replies

change icon of an object

Paul Greenberg
Level 1
Level 1

I am using data and shell model when creating diagrams.

This is my shell.js. It is standard one, taken from Cisco NeXt UI examples.

The data is comming from topologyData dictionary.

How do I change the icon of a network device inside shell.js? i.e. how do I interact with it withing nx.define?

(function (nx) {
    /**
     * define application
     */
    var Shell = nx.define(nx.ui.Application, {
        methods: {
            start: function () {
                //your application main entry

                // initialize a topology
                var topo = new nx.graphic.Topology({
                    // set the topology view's with and height
                    width: 1500,
                    height: 850,
                    // node config
                    nodeConfig: {
                        // label display name from of node's model, could change to 'model.id' to show id
                        label: 'model.name'
                    },
                    // link config
                    linkConfig: {
                        // multiple link type is curve, could change to 'parallel' to use parallel link
                        linkType: 'curve'
                    },
                    // show node's icon, could change to false to show dot
                    showIcon: true
                });

                //set data to topology
                topo.data(topologyData);
                //attach topology to document
                topo.attach(this);
            }
        }
    });

    /**
     * create application instance
     */
    var shell = new Shell();

    /**
     * invoke start method
     */
    shell.start();
})(nx);
3 Replies 3

aaikepae
Cisco Employee
Cisco Employee

You can add 'iconType' attribute under 'nodeConfig', here is an demo you can reference.

Cisco DevNet: NeXt UI - Demo

Base - Set node's label and icon

Abu

Aikepaer Abuduweili, that is different.

`data.js` has:

    nodes: [
        {"id": 0, "x": -250, "y": 350, "name": "RTR01", "icon": "router"},
        {"id": 1, "x": -250, "y": 1100, "name": "RTR02", "icon": "router"},
        {"id": 2, "x": -1000, "y": 700, "name": "RTR03", "icon": "router"},

then, in `shell.js` I have:

                    nodeConfig: {
                        // label display name from of node's model, could change to 'model.id' to show id
                        label: 'model.name',
                        iconType: 'model.icon' 
                    },

I made an example for you reference. maybe you can see the differences.

Community/60024 - JSFiddle

Getting Started

Find answers to your questions by entering keywords or phrases in the Search bar above. New here? Use these resources to familiarize yourself with the community: