topic Re: How to close search widget at start in Web AppBuilder Custom Widgets Questions

How to close search widget at start

BrandonPrice — Tue, 27 Mar 2018 15:15:03 GMT

I am using WAB Developer's tab theme. I have downloaded the script onto the server. Any suggestions? Screenshot below:

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=1d5a7555-3ac3-44cb-bbc1-5819a008cd42&searchIndex=3‌

Re: How to close search widget at start

RobertScheitlin__GISP — Tue, 27 Mar 2018 15:56:33 GMT

Brandon,

The search widget is not a widget that can open and close by default so the issue would be how to open it back up if closed.

Re: How to close search widget at start

BrandonPrice — Tue, 27 Mar 2018 16:46:16 GMT

Thank you Robert. This makes more sense. I am going to investigate how to incorporate the search widget the story map uses since it is closeable.

Re: How to close search widget at start

RobertScheitlin__GISP — Tue, 27 Mar 2018 16:57:43 GMT

Brandon,

So when you say closeable are you really wanting collapsed (just showing the magnifier button)?

Re: How to close search widget at start

BrandonPrice — Tue, 27 Mar 2018 20:01:50 GMT

Yes. That is what I want to do and then expand onclick.

Re: How to close search widget at start

RobertScheitlin__GISP — Wed, 28 Mar 2018 14:34:47 GMT

Brandon,

So I did some testing and the JS API search has the ability from the Search dijit to collapse like you are wanting, but the WAB has done something in their implementation that does not like when you set enableButtonMode on the search dijit in the WAB search widget.

Re: How to close search widget at start

BrandonPrice — Wed, 28 Mar 2018 19:40:56 GMT

Hello Robert:

Thank you for seeing if this was possible.

Brandon

Re: How to close search widget at start

JosephDavies — Wed, 18 Apr 2018 11:06:45 GMT

Hi Robert,

I am also trying to make the WAB search widget collapsable, but changing enablebuttonmode: true and expanded: false in the new Search constructor of the Widget.js file doesnt seem to work.

Are you aware of any kind of work-around?

Joe

Re: How to close search widget at start

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:33:40 GMT

Brandon and Joe,

So I did some digging and testing and here is what has to be changed.

In the Search Widget.js:

      _resetSearchDijitStyle: function() {
        // html.removeClass(this.domNode, 'use-absolute');
        // if (this.searchDijit && this.searchDijit.domNode) {
        //   html.setStyle(this.searchDijit.domNode, 'width', 'auto');
        // }
        //
        // setTimeout(lang.hitch(this, function() {
        //   if (this.searchDijit && this.searchDijit.domNode) {
        //     var box = {
        //       w: !window.appInfo.isRunInMobile ? 274 : // original width of search dijit
        //         parseInt(html.getComputedStyle(this.domNode).width, 10)
        //     };
        //     var sourcesBox = html.getMarginBox(this.searchDijit.sourcesBtnNode);
        //     var submitBox = html.getMarginBox(this.searchDijit.submitNode);
        //     var style = null;
        //     if (box.w) {
        //       html.setStyle(this.searchDijit.domNode, 'width', box.w + 'px');
        //       html.addClass(this.domNode, 'use-absolute');
        //
        //       if (isFinite(sourcesBox.w) && isFinite(submitBox.w)) {
        //         if (window.isRTL) {
        //           style = {
        //             left: submitBox.w + 'px',
        //             right: sourcesBox.w + 'px'
        //           };
        //         } else {
        //           style = {
        //             left: sourcesBox.w + 'px',
        //             right: submitBox.w + 'px'
        //           };
        //         }
        //         var inputGroup = query('.searchInputGroup', this.searchDijit.domNode)[0];
        //
        //         if (inputGroup) {
        //           html.setStyle(inputGroup, style);
        //           var groupBox = html.getMarginBox(inputGroup);
        //           var extents = html.getPadBorderExtents(this.searchDijit.inputNode);
        //           html.setStyle(this.searchDijit.inputNode, 'width', groupBox.w - extents.w + 'px');
        //         }
        //       }
        //     }
        //   }
        // }), 50);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

In the style.css (Change auto to 212px !important;):

.jimu-widget-search .arcgisSearch .searchGroup .searchInputGroup .searchInput{
  width: 212px !important;
}‍‍‍‍‍‍‍

Re: How to close search widget at start

JosephDavies — Wed, 18 Apr 2018 15:36:06 GMT

Thanks Robert,

In addition to your changes I also had to remove all the .jimu-widget-search classes from 'themes\LaunchpadTheme\styles\default\css\launchpad.css' - which were messing with the esri.css styles

Re: How to close search widget at start

RobertScheitlin__GISP — Wed, 18 Apr 2018 15:48:47 GMT

Joseph,

Oh. I did not test in the launchpad theme. Good to know.

Re: How to close search widget at start

gisacct — Wed, 18 Apr 2018 22:28:09 GMT

I tried this on my end and could not get it to work. The changes I made were uncommenting everything between function in the widget.js and changing the css class width to 212px !important.

Re: How to close search widget at start

RobertScheitlin__GISP — Thu, 19 Apr 2018 12:58:01 GMT

gis acct,

Did you make these changes in the client/stemApp folder or in your particular apps folder?

Re: How to close search widget at start

BrandonPrice — Thu, 19 Apr 2018 14:06:45 GMT

In the folder for the particular app I wanted customized

Re: How to close search widget at start

RobertScheitlin__GISP — Thu, 19 Apr 2018 14:09:03 GMT

Well, I tested in the foldable theme in WAB 2.7 and those changes I outlined worked fine.

Re: How to close search widget at start

BrandonPrice — Thu, 19 Apr 2018 14:21:19 GMT

I will try changing it in the client/stemApps instead