web appbuilder customization

4618
5
Jump to solution
03-07-2016 09:22 AM
DiklaZeidman
New Contributor II

Hi all,

There are some things I would like to customize in the Web App that I'm making and I will appreciate your help:

first - you need to know that I built the app in arcgis online and then downloaded the code and deployed it from my server.

Now i'm trying to configure it in my server.

1. I'm using the JewelryBox Theme. I would like to make the header panel more wide, so I can put there a larger logo. where do I change the parameters of the panel hight? (I saw that it is seperated to "header section" and "container section")

2. still in the header panel - how do I change its color?

3. Widgets in the header panel: I want to remove the "layer list" widget from there. what do I need to do? (deleting its folder from the widgets folder is not enogh)

this is it for now.

Thanks for all the helpers!

Dikla.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Dikla,

  Working with the minified code that you get when downloading from a AGOL WAB app can be difficult but most of what you want to do is CSS so its not to bad. But as Rebecca points out if you are going to want and modify yours apps in the future then you need to get the WAB Dev version.

1a. In the main config.json file make these changes (change the top attribute):

  a.{"uri":"themes/JewelryBoxTheme/widgets/HeaderController/Widget","position:{"left":0,"top":0,"right":0,"height":60,"relativeTo":"browser"}

  b. {"visible":false,"panel":{"uri":"themes/JewelryBoxTheme/panels/LDockablePanel/Panel","position":{"left":0,"top":60,"bottom":0,"width":360,"relativeTo":"browser"}}

  c. "map":{"3D":false,"2D":true,"position":{"left":0,"top":60,"right":0,"bottom":0}

I have change them all to 60 as an example.

1b. In the \themes\JewelryBoxTheme\widgets\HeaderController\Widget.js make these change to allow for a larger logo

(Search for the following lines and make your adjustment to the 30 number(s)):

  a. .logo{*/ height: 30px;}

  b. _setElementsSize:function(){a.setStyle(this.logoNode,{height:"30px",marginTop:(this.height-30)/2+"px"});a.setStyle(this.titleNode,{lineHeight:this.height+"px"});

2. In the \jimu.js\css\jimu-theme.css (change both the bold sections)

.jimu-main-background{background-color: #485566; background-color: rgba(72, 85, 102, 0.9);}

3. In the main config.json search for the following text (exactly) and delete it:

,{"uri":"widgets/LayerList/Widget","version":"2.0","id":"widgets_LayerList_Widget_17","name":"LayerList","label":"Layer List","index":1}

View solution in original post

5 Replies
RebeccaStrauch__GISP
MVP Emeritus

Have you downloaded the develop editing of Web AppBuilder?

Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Tips and Observations for getting Web AppBuilder - Developer Edition Installed

if so, you may want to look at theis help page  Create or import an app—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

you may also want to bookmark Web AppBuilder Developer Edition - Customization Resource List   so you can see what others are doing including many other custome widgets.

RobertScheitlin__GISP
MVP Emeritus

Dikla,

  Working with the minified code that you get when downloading from a AGOL WAB app can be difficult but most of what you want to do is CSS so its not to bad. But as Rebecca points out if you are going to want and modify yours apps in the future then you need to get the WAB Dev version.

1a. In the main config.json file make these changes (change the top attribute):

  a.{"uri":"themes/JewelryBoxTheme/widgets/HeaderController/Widget","position:{"left":0,"top":0,"right":0,"height":60,"relativeTo":"browser"}

  b. {"visible":false,"panel":{"uri":"themes/JewelryBoxTheme/panels/LDockablePanel/Panel","position":{"left":0,"top":60,"bottom":0,"width":360,"relativeTo":"browser"}}

  c. "map":{"3D":false,"2D":true,"position":{"left":0,"top":60,"right":0,"bottom":0}

I have change them all to 60 as an example.

1b. In the \themes\JewelryBoxTheme\widgets\HeaderController\Widget.js make these change to allow for a larger logo

(Search for the following lines and make your adjustment to the 30 number(s)):

  a. .logo{*/ height: 30px;}

  b. _setElementsSize:function(){a.setStyle(this.logoNode,{height:"30px",marginTop:(this.height-30)/2+"px"});a.setStyle(this.titleNode,{lineHeight:this.height+"px"});

2. In the \jimu.js\css\jimu-theme.css (change both the bold sections)

.jimu-main-background{background-color: #485566; background-color: rgba(72, 85, 102, 0.9);}

3. In the main config.json search for the following text (exactly) and delete it:

,{"uri":"widgets/LayerList/Widget","version":"2.0","id":"widgets_LayerList_Widget_17","name":"LayerList","label":"Layer List","index":1}

DiklaZeidman
New Contributor II

thank you so mauch!

0 Kudos
DiklaZeidman
New Contributor II

Hi Robert,

If I'll use the WAB Dev version, and want to change the CSS , do I need to go to the same places you wrote but this time insdie : arcgis-web-appbuilder-1.3\server\apps\5  (5 is the ID of the App)?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Correct

0 Kudos