0

I have a sidebar with a simple form with a dropdown that selects some categories of the entries. There's a button beside it for the user to add a new category. This button shows a modal dialog and in this dialog there's an input box for the user to input the new category name and an "Add New" button that will send the new item back to the sidebar. I would like for the respective dropdown to have the new category included among its options plus its text to be already populated with the new name.

All I could think so far was to use the localStorage but I then I don't know how to trigger updates to the dropdown on the sidebar (or any other element) when the button is pressed and the dialog is closed with a new value submitted. I've been looking at this and this but I couldn't really get it to work to my case.

I have supressed the Code.gs pieces because they work just fine and are not relevant.

sidebar.html

<script>
  document.getElementById("btn-add-category").addEventListener("click", goToAddNewItem);

  function goToAddNewItem(){
    google.script.run.loadNewItemForm();
  }
      
  (async () => {
    //After modal dialog has finished, receiver will be resolved
    let receiver = new Promise((res, rej) => {
    window.modalDone = res;
    });
    var message = await receiver;
    
    document.getElementById("category-sidebar").value = message
  })();
</script>

modal.html

This is the html file of the modal dialog:

<body>
  <div class="form-group" id="input-category">
    <label for="category">Category:</label>
    <div class="input-group input-line">
      <input type="text" class="form-control form-control-sm" id="category">
    </div>
  </div>
  <div class="form-group">
    <button id="btn-add-new" class="btn btn-dark btn-sm">Add New</button>
  </div>

  <script>

    function findSideBar(limit) {
      let f = window.top.frames;

      for (let i = 0; i < limit; ++i) {
        try {
          if (
            f[i] /*/iframedAppPanel*/ &&
            f[i].length &&
            f[i][0] && //#sandboxFrame
            f[i][0][0] && //#userHtmlFrame
            window !== f[i][0][0] //!== self
          ) {
            console.info('Sidebar found ');
            var sidebar = f[i][0][0];
            sidebar.modalDone(document.getElementById("category").value);
          }
        } catch (e) {
          console.error(e);
          continue;
        }
      }
    };

    function afterAddNewClicked(){
      findSideBar(10);
      google.script.host.close();
    }

    document.getElementById("btn-add-new").addEventListener("click", afterAddNewClicked);

  </script>
</body>

EDIT:

modal.html now has the function findSidebar

everspader
  • 1,272
  • 14
  • 44
  • Where is your findSideBar function ? – TheMaster Dec 23 '20 at 15:52
  • @TheMaster I didn't implement it. Using that function is the only way to communicate between sidebar and dialog? – everspader Dec 23 '20 at 16:04
  • As my previous answer states, that is one of the way, but provides the best access. – TheMaster Dec 23 '20 at 16:52
  • @TheMaster alright, I'm just a bit confused on how to set the submitted value to the dropdown after the button is clicked in the modal dialog. – everspader Dec 23 '20 at 19:01
  • @TheMaster I edited the post with the current code I have. In the modal.html I added the findSidebar function and the line to send it back to the sidebar modalDone but I still don't get the dropdown to update – everspader Dec 23 '20 at 19:42
  • Need logs and debugging effort. Start by looking into the browser devtools console. – TheMaster Dec 23 '20 at 19:45
  • Since you can just send anything to sidebar or a dialog. You will need to have both sidebar and dialog polling for information. So it makes sense to have a polling manager on the server directing traffic to and from each dialog. – Cooper Dec 23 '20 at 19:48
  • `label` doesn't have a `value` attribute. – TheMaster Dec 24 '20 at 09:34

1 Answers1

0
sidebar.modalDone = document.getElementById("category").value

res or modalDone needs to be called. Just assigning a value won't work. Try

sidebar.modalDone(document.getElementById("category").value);
TheMaster
  • 45,448
  • 6
  • 62
  • 85
  • I have tried both options and it seems that the correct element is caught but its value is not set somehow – everspader Dec 23 '20 at 20:03
  • All the corresponding code is in the post already with the exception of other elements on the page. – everspader Dec 24 '20 at 08:00
  • 2
    @everspader That's the thing. I or anyone else cannot verify that the problem even exists without a "reproducible" example, which includes elements/html and all other source. The code also needs to be "minimal". Nobody has to mess with your actual source. You need to provide code that reliably reproduces the exact problem. To do this, follow [mcve]. Step1 is "Starting from scratch": Then keep adding 1 by 1 until the problem appears and then you'll have a mcve. See [mcve]- It's the art of debugging: value what is written and follow it to the dot. – TheMaster Dec 24 '20 at 09:32