nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Trouver plus de publications taguées avec

Accepted answers

StanMcShinsky

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

All comments

StanMcShinsky

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"
      },
      ......

-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

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

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.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.