WAB - Edit Widget

1378
10
Jump to solution
05-01-2018 08:35 AM
RickeyFight
MVP Regular Contributor

I am working on Web AppBuilder Custom Widgets‌ that when a user clicks on an edit template the toolbar will minimize. I need this because I am trying to edit on a mobile device and the toolbar take up too much of the screen. 

Thanks! 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Rickey,

   Add this to the Edit widgets _worksAfterCreate function.

Tested in foldable theme.

        on(this.editor.templatePicker, 'selection-change', lang.hitch(this, function() {
          var selected = this.editor.templatePicker.getSelected();
          if(selected){
            var panel = this.getPanel();
            panel.foldableNode.click();
          }
        }));

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Emeritus

Rickey,

   Add this to the Edit widgets _worksAfterCreate function.

Tested in foldable theme.

        on(this.editor.templatePicker, 'selection-change', lang.hitch(this, function() {
          var selected = this.editor.templatePicker.getSelected();
          if(selected){
            var panel = this.getPanel();
            panel.foldableNode.click();
          }
        }));
RickeyFight
MVP Regular Contributor

That is what I needed!  Thank you! 

0 Kudos
RickeyFight
MVP Regular Contributor

Robert Scheitlin, GISP‌ Is there a way to open the edit tool back up after the user closes the edit popup? 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

take out the if selected condition.

0 Kudos
RickeyFight
MVP Regular Contributor

The template gets deselected when I click on the map not when Close is clicked. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rickey,

   This should cover that then: (lines 12-15)

      _addButtonToInspector: function() {
        var closeButton = new Button({
          "label": this.nls.close,
          "class": " atiButton close-button"
        }, html.create("div"));

        html.place(closeButton.domNode,
                   this.editor.attributeInspector.deleteBtn.domNode,
                   "before");
        this.own(on(closeButton, 'click', lang.hitch(this, function() {
          this.editPopup.hide();
          setTimeout(lang.hitch(this, function(){
            var panel = this.getPanel();
            panel.foldableNode.click();
          }),1200);
        })));
...
RickeyFight
MVP Regular Contributor

Robert Scheitlin, GISP‌ As always thank you! This did the trick. 

0 Kudos
GeorgeKatsambas
Occasional Contributor III

Is there a way that a password required to use the edit widget can be added?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I guess it could be done. But restricting access to editing is better handled by adding the edit widget to a certain app that is only shared with certain AGOL logins.