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 Sidebar Panel

by Technical Evangelist on ‎09-09-2015 07:04 AM - edited on ‎04-06-2017 04:16 AM by Technical Evangelist (900 Views)

Description

The Sidebar (sometimes referred as Accordion) is an element of Geospatial Portal User Interface. Its basic configuration is available through the Administration Console. More advanced customization might be introduced in the relevant ASPX template.

Guide_gui.png

The further development may include custom controls located in the Geospatial Portal Sidebar as presented in the code extracts below.

 

Panel Developed 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 Panel (or other type of control wrapped in ExtJS) and custom properties that will be passed to the client side (JS). All the relevant elements (JS code, images, CSS) of the control shall be provided as the Embedded Resources.

HelloWorld.cs

 

The JavaScript control implements the actual panel 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.

HelloWorld.js 

 

Adding the control to the Accordion

The custom control is available as a new element to be put in custom *.aspx template. Note, that it should be declared in all aspx files where the panel will be used.

 

<a:HelloWorld ID="HelloWorld1" runat="server" Title="Hello World" TheUltimateAnswer="42" /> 

 

Useful Information
It is important to put the unique ID for each control provided in the aspx template. This requirement makes control configuration available under the Administration Console.

Default.aspx before the change

 

Default.aspx after the change

 

Panel Developed 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 Sidebar. Using $GP.ui.sidebar it is possible to add new ExtJS elements to the existing Sidebar 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.

 

 var items = [
    {
        xtype: "label",
        text: "Hello World"
    },
    {
        xtype: "button",
        text: "Dots",
        listeners: {
            click: function(b, e) {
                alert(b.text);
            },
            mouseover: function(b, e) {
                b.setText(b.getText() + ".");
            }
        }
    }
];

$GP.ui.sidebar.add({
    xtype: "panel",
    layout: "fit",
    title: "Brand New Sidebar Panel",
    items: items
});

 

Overview
Contributors