Move attribute table to side of page rather than bottom?

[JasonKlrkland]

Just a feature request to allow the developer to have the attribute table docked on the left or right side of the page rather than always at the bottom.

A specific use-case is a police/fire vehicle and calls map where the attribute table shows 20-50 active calls. With the widget at the bottom, the user can only see 3-5 records at a time

[StanMcShinsky · Accepted solution]

Jason Klrkland​,

Just to get you started here is how to move it off of the bottom.

In your main config.json file at the root of your application move this chunk of code

      {
        "uri": "widgets/AttributeTable/Widget",
        "positionRelativeTo": "browser",
        "version": "1.1",
        "id": "widgets/AttributeTable/Widget_11",
        "position": {
          "left": 0,
          "top": 0
        },
        "name": "AttributeTable",
        "label": "Attribute Table",
        "config": "configs/AttributeTable/config_Attribute Table.json"
      },

To the bottom widget pool. It would look something like this:

..... 
 "widgetPool": {
    "panel": {
      "uri": "themes/FoldableTheme/panels/FoldablePanel/Panel",
      "positionRelativeTo": "map",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5
      }
    },
    "widgets": [
      {
        "uri": "widgets/Legend/Widget",
        "version": "1.1",
        "id": "widgets/Legend/Widget_13",
        "index": 2,
        "name": "Legend",
        "label": "Legend"
      },
      {
        "uri": "widgets/AttributeTable/Widget",
        "positionRelativeTo": "browser",
        "version": "1.1",
        "id": "widgets/AttributeTable/Widget_11",
        "position": {
          "left": 0,
          "top": 0
        },
        "name": "AttributeTable",
        "label": "Attribute Table",
        "config": "configs/AttributeTable/config_Attribute Table.json"
      },
      ......

It will now be available as a widget to open in the header. The down side is it does not maximize automatically. You need to click the arrow to open the attribute table and then you can expand it to the top. It will stay that way even if you close the widget so you can open it where you left off.

-Stan

[JasonKlrkland]

Is there a way to configure these settings in WAB in ArcGIS Online?  We're excited to use WAB on AGO because it simplifies our development stack so much.

[StanMcShinsky]

Jason Klrkland​,

Unfortunately as of now you can not make these changes in AGOL. I believe one day we will be able to add custom widgets to AGOL. Cross your fingers and make a wish.

-Stan

[JasonKlrkland]

No problem. AGOL appears to be evolving quickly and we're very excited about its potential.

To use WAB locally, does it require 10.3?  We're still on 10.1

[StanMcShinsky]

Jason Klrkland​,

Two more things to help out with this.

1. Here is the code to have the attribute table widget open at start:

    Root config.json make this change this

"positionRelativeTo": "browser",

to this

"positionRelativeTo": "map",

add this

"openAtStart": "true",

together it will look like this

{
        "uri": "widgets/AttributeTable/Widget",
        "positionRelativeTo": "map",
        "version": "1.1",
        "id": "widgets/AttributeTable/Widget_11",
        "position": {
          "left": 0,
          "top": 0
        },
        "name": "AttributeTable",
        "openAtStart": "true",
        "label": "Attribute Table"
      },

2. Here is the code needed to have the table open when the widget is opened

    \widgets\AttributeTable\Widget.json

replace

this._closeTable();

with this

this._openTable();

The place for this is varying on what version of WAB, but it is around line 200 in v1.0 or 122 in v1.1

Robert Scheitlin, GISP​ posted this fix here Re: Open Attribute Table Widget on start?

attrUtils.readLayerInfosObj(this.map).then(lang.hitch(this, function(layerInfosObj) {
          this.own(on(
            layerInfosObj,
            'layerInfosIsShowInMapChanged',
            lang.hitch(this, this.onLayerInfosIsShowInMapChanged)));
          this.own(layerInfosObj.on(
            'layerInfosChanged',
            lang.hitch(this, this.onLayerInfosChanged)));
          this._createBar();
        // this._closeTable();
          this._openTable();
        }));

Now to just figure out how to maximize the table to use all the space.

[RebeccaStrauch__GISP]

Jason, it should work with 10.1 ArcGIS Server services...although I use 10.2.2 so haven't tested.  But, it doesn't actually depend on any desktop version, so you should be fine, especially if using AGOL services.

to get started, check out

Tips and Observations for getting Web AppBuilder -  Developer Edition Installed​

and Web AppBuilder Developer Edition – Customization Resource List

<< disclaimer...my blogs >>