How does people deal with updating UIs?

danielo515 · September 5, 2023, 7:35pm

So far, for my plugin I have been using the builtin methods to create dom elements. Basically Setting and its different helpers.
However, now I will be dealing with lists of elements where the user will be able to add or remove elements and the UI should reflect this. What is the most “native” aka dependency way of doing this? Does the html helpers provide any convenience for this? Or should I just be keeping references and manually remove dom nodes and stuff?
Or do,plugin authors just rely in any UI library (react, svelte, solid) and continue with their lives?

ush · September 13, 2023, 5:30am

I’m new to JavaScript so I’m not sure this is the best way to go, but in my plugin, I’m re-opening the modal when the “Copy” button is pressed.

github.com

RyotaUshio/obsidian-math-booster/blob/c92675a66c08a4db48795ec4bbd960a6598ffef9/src/settings/profile.ts#L130


      
                                      this
                                  ).open();
                              });
                      }).addButton((editButton) => {
                          editButton.setIcon("copy")
                              .setTooltip("Copy")
                              .onClick(() => {
                                  const copied = JSON.parse(JSON.stringify(this.plugin.extraSettings.profiles[id]));
                                  copied.id = makeIdOfCopy(id, this.plugin.extraSettings.profiles);
                                  this.plugin.extraSettings.profiles[copied.id] = copied;
                                  this.open();
                              });
                      }).addButton((deleteButton) => {
                          deleteButton.setIcon("trash-2")
                              .setTooltip("Delete")
                              .onClick(() => {
                                  new ConfirmProfileDeletionModal(id, this).open();
                              });
                      });
              }
          }

It looks like Templater does the same thing when the “+” button is pressed in the folder template setting, except this.open is replaced by this.display because here we are using PluginSettingTab rather than Modal.

github.com

SilentVoid13/Templater/blob/487805b5ad1fd7fbc145040ed82b4c41fc2c48e2/src/settings/Settings.ts#L426


      
                  button
                      .setTooltip("Add additional folder template")
                      .setButtonText("+")
                      .setCta()
                      .onClick(() => {
                          this.plugin.settings.folder_templates.push({
                              folder: "",
                              template: "",
                          });
                          this.plugin.save_settings();
                          this.display();
                      });
              });
          
          this.plugin.settings.folder_templates.forEach(
              (folder_template, index) => {
                  const s = new Setting(this.containerEl)
                      .addSearch((cb) => {
                          new FolderSuggest(cb.inputEl);
                          cb.setPlaceholder("Folder")
                              .setValue(folder_template.folder)

danielo515 · September 13, 2023, 6:52am

Yep, that is what I ended doning for simple UIS. After all, the settings is going to be just a couple of elements, so it is not that slow to render anyway.

Thanks for sharing your findings