topic Re: Bookmark Widget (v2.7) Selected Color in ArcGIS Web AppBuilder Questions

Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Wed, 14 Mar 2018 16:59:52 GMT

I am trying to add a background color to the selected bookmark in the v2.7 widget. In the v2.4 widget I added the following code to "common.css", but now this is not working.

.jimu-img-node.jimu-state-selected{

background-color: #86b186;

}

Does anyone have any ideas?

Jason

Re: Bookmark Widget (v2.7) Selected Color

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:42:02 GMT

Jason,

In 2.7 Card style bookmarks there is no selected class that is added on click of a bookmark. You will have to add two css rules to the common.css and code to the CustomBookmarks.js and WebmapBookmarks.js files

Css rules:

.jimu-img-node.jimu-float-leading.clearFix.selected{
  padding-top: 5px;
  background-color: #86b186;
}

.jimu-img-node.jimu-float-leading.clearFix{
  padding-top: 5px;
}‍‍‍‍‍‍‍‍

WebmapBookmarks.js:

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, SpatialReference,
    BaseWidget, _TemplatedMixin, utils, query) {
....

      _onBookmarkClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

CustomBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/sniff',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  './ItemNode',
  'jimu/dijit/ImageChooser',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, has,
    SpatialReference, BaseWidget, _TemplatedMixin, utils,
    ItemNode, ImageChooser, query) {
....
      _onNodeBoxClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Thu, 15 Mar 2018 15:03:24 GMT

Thanks for the help Robert! I really appreciate it!

Jason

Re: Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Wed, 21 Mar 2018 14:11:56 GMT

Robert,

I just realized that how I added/replaced the code in CustomBookmarks.js and WebmapBookmarks.js caused the bookmark widget to not work. I am adding 'dojo/query' under define and query after function. I am not sure if I should be strictly adding the _onBookmarkClick and _onNodeBoxClick code (and if so where), or if I am replacing current code (and exactly what code I am replacing). I tired a few variations which all failed.

Can you please help me?

Re: Bookmark Widget (v2.7) Selected Color

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:42:05 GMT

Jason,

You are just adding the dojo/query require to each file and then adding the new

        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');‍‍‍‍

code to the _onNodeBoxClick functions.

Re: Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Wed, 21 Mar 2018 14:34:57 GMT

I SWEAR I tried that, but I must not have been using my brain when I did. It works fine now. THANK YOU!

Re: Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Thu, 12 Sep 2019 13:55:53 GMT

Robert,

Any idea how to update the 2.13 version to change the background color on the selected bookmark?

Jason

Re: Bookmark Widget (v2.7) Selected Color

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:42:08 GMT

Jason,

Not much has changed they only added an additional module to the define array...

CustomBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'dojo/sniff',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  './ItemNode',
  'jimu/dijit/ImageChooser',
  'libs/Sortable',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, has,
    SpatialReference, BaseWidget, _TemplatedMixin, utils,
    ItemNode, ImageChooser, Sortable, query) {
...
      _onNodeBoxClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

WebmapBookmarks.js

define([
  'dojo/Evented',
  'dojo/_base/declare',
  'dojo/_base/lang',
  'dojo/_base/html',
  'dojo/_base/array',
  'dojo/on',
  'esri/SpatialReference',
  'jimu/BaseWidget',
  'dijit/_TemplatedMixin',
  './utils',
  'libs/Sortable',
  'dojo/query'
],
  function (Evented, declare, lang, html, array, on, SpatialReference,
    BaseWidget, _TemplatedMixin, utils, Sortable, query) {
...

      _onBookmarkClick: function (bookmark) {
        query('.jimu-img-node.jimu-float-leading.clearFix.selected').forEach(function (node) {
          html.removeClass(node, 'selected');
        });
        html.addClass(bookmark.itemNode.domNode, 'selected');
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Bookmark Widget (v2.7) Selected Color

JasonStanton__GISP — Thu, 12 Sep 2019 18:34:44 GMT

Thanks! Not sure what I was doing wrong, but it works now!