Developers Knowledge Base

Learn how to manipulate, modify, and tune your GeoMedia WebMap, Geospatial Portal and Consumer portal instances.
Showing results for 
Search instead for 
Do you mean 

Custom toolbar control

by Technical Evangelist on ‎09-02-2015 06:43 AM - edited on ‎04-06-2017 06:32 AM by Technical Evangelist (1,068 Views)

Add new class

  • Creating controls in this way requires some boilerplate code.
  • Fortunately we have Visual Studio code snippets! Available to download in attachements below.


C# Part

  • Remove all the generated code
  • Start typing: toolbar...
  • Press tab two times
  • Fill the necessary snippet variables


  • MyLibrary can stay as it is since this is our namespace name.
  • Replace MyControl with HelloToolbar.
  • Visual Studio generates the code.



We are:

  • Registering embedded resource MyLibrary.HelloToolbar.js in the assembly.
  • Using ClientScriptResource attribute to make a contract on our JavaScript implementation.
  • Implementing IMapToolbar interface:
    • Inheriting from ExtJS Component.
    • Control will be rendered within HTML span tag.
    • MapToolbarCategoryID property

JavaScript Part

  • Add new Javascript file and set HelloToolbar as its name.
  • Name must be the same as registered in the WebResource contract.
  • Name must be the same as registered in the ClientScriptResource contract.
  • Remember to set new Javascript file’s compilation action as Embedded Resource (not as Content).





  • Fortunately we have Visual Studio snippet also for the Javascript part.
  • Start typing: control...
  • MyLibrary namespace can stay as it is our namespace.
  • Use HelloToolbar as the control’s name (as it was contracted in the C# part).
  • Use ExtJS.Controls.Component as the base class for registration of the control.


  • Add very simple implementation inside of the getExtConfig empty javascript object:
    • xtype: button
    • text...
    • handler...
  • Code is wrapped in !(function(){})(); to avoid
    • global namespace pollution
    • concatenation errors.



Remember to set the Build Action to Embedded Resource!


Otherwise ASP.NET won’t know about this code. Since it is registered in the C# part, not having an embedded resource like that would produce an error.




Make an instance of your control in the Toolbar


  • Examples.aspx.cs file or MyPage.aspx.cs if ready!
  • Find SetUpMyToolbar method
  • Add your control MyLibrary.HelloToolbar in the same manner as other controls are added
    t.Add(MapToolbarCategory.Tools, new MyLibrary.HelloToolbar());
  • Build the solution
  • Your portal is ready to run!





  • Creating toolbar control in this way seems to be much more complicated in comparison with adding it through $GP API...
  • For simple customizations it is not recommended but for heavier controls and for control sets that require translations, possibility to be enabled or disabled from the admin console, it is recommended.
  • Actually... it is not really the old-school ASP.NET where server-side code is mixed with JS code.
  • We are using ASP.NET and AjaxControlToolkit for script dependency management.