Developers Knowledge Base

WebGIS enables powerful geospatial web applications and services that securely share your organization’s rich geospatial data, and provides tools to deeply examine spatial data and create value added products, on demand.
Showing results for 
Search instead for 
Do you mean 

Custom Toolbar Panel

by Technical Evangelist on ‎09-09-2015 07:10 AM - edited on ‎04-06-2017 04:19 AM by Technical Evangelist (864 Views)

Toolbar Overview

The Map Toolbar (or simply Toolbar) is an element of Geospatial Portal User Interface. Its basic configuration is available through the Administration Console.

Guide_gui.png


The more advanced customization or further Toolbar development may introduce custom buttons or even whole category as presented in the code extracts below.

 

Toolbar modified using Ajax Control Toolkit

Methodology

The technologies adopted in the Geospatial Portal development include JavaScript and C#. The controls provided in Portal core are developed in a way that adopts both technologies and rely on custom implementation of ExtJS and Ajax Control Toolkit.


The Ajax Control Toolkit library is responsible for the communication between server (C#) and client (JS) side of the controls.

 

Be Careful
Although such way of development has been used for ages, the presented solution is not prospective and may be abandoned.

There is no warranty that further Portal releases will be depended upon the Ajax Control Toolkit.

 

Creating the control

 

The C# class implements the custom ExtJS Component, which derives the IMapToolbarItem interface. The custom properties that will be passed to the client side (JS) may be also provided. All the relevant elements (JS code, images, CSS) of the control shall be provided as the Embedded Resources.


HelloToolbarControl.cs

 

The JavaScript control implements the actual toolbar button body, using ExtJS types and structures. The actual control prototype shall return the content in the getExtConfig method and may introduce the additional properties passed from server (C#) side

HelloToolbarControl.js

 

HelloToolbarControl.css

Sample style sheet Embedded Resource may introduce custom formatting of the developed elements.

 

.foo 
{
    background-color: Red !important;
}

Adding control to MapToolbar

This attitude requires also to provide the custom MapToolbarPlugin class that will allow to put the developed Toolbar Control to the appropriate Map Toolbar Category.

a) MapToolbarPlugin.cs for existing MapToolbarCategory

The original MapToolbarCategory collection provides such predefined Members:

 

  • Authentication
  • Edit
  • Measurement
  • Search
  • Selection
  • Services
  • Tools

b) MapToolbarPlugin.cs with new category

 

Toolbar modified using API

The Geospatial Portal SDK introduces JavaScript API that allows to easily extend Portal User Interface. One of the features provided is the handle to develop the Toolbar. Using $GP.ui.toolbar it is possible to add new ExtJS elements to the existing Toolbar as well as the get the handle to it. More information can be found in the API documentation.

Be Careful
Although such way of development has been recently introduced into the Portal and may vary in further Portal releases, it is recommended to follow this path. Note that controls developed using API have limited adaptability, as their configuration is currently not available under the Administration Console.

 

// Add button to the toolbar (first tab)
// that displays "Hello from toolbar!"
$GP.ui.toolbar.add({
    xtype: "tbbutton",
    text: "?",
    handler: function (b) {
        $GP.ui.info("Hello from toolbar!");
    }
});

Another examples shows how to add the Toolbar Button to the particular category. The categories are indexed in order of appearance starting from 0.

$GP.ui.toolbar.add({
    categoryIndex: 5,
    xtype: "tbbutton",
    text: "Hello World!",
    handler: function (b) {
        $GP.ui.info("Hello World!");
    }
});

 

Overview