Skip to content

2. Solid UI know how

Jump to bottom
Timea edited this page Oct 20, 2021 · 2 revisions

For general Solid-ui know-how head over to the solid-ui readme.

Note: We are trying our best to keep this documentation up to date. If you see something outdated we invite you to make a ticket over at Solid-ui GitHub issues.

Authorization and current user

UI concepts

Refresh of UI

  • doing a refresh of the whole UI is not ideal because of a lot of recalculations, the reason why UI element/component level refresh is advised or resource refresh.
  • UI element refresh:
    • a good example in Solid is maybe the activity of login, when a user is logged in, you are able to do more things: chat, add a friend... So how to do this?
    • the Solid-ui takes care of element refresh through the refresh functions which are available on the div itself. Example code here
    • if one needs to refresh more elements part of the same div, refreshTree(div) triggers that all refresh functions of each div is called. Example here
    • in a nutshell:
 const parentDiv = dom.createElement('div')
 const div = dom.createElement('div')
 div.refresh = function () {
      div.innerHTML = "updated";
    }
 parentDiv.appendChild(div)
 UI.widgets.refreshTree(parentDiv)
  • resource refresh:
    • in general javascript elements can have eventListeners. One can make use of eventListeners (like 'click') to change a UI element's look and text, for example.
    • a good example is when we delete a file or folder the whole display of the folder-pane must change/rerender to show that the file/folder disappeared. This is achieved through the kb.updater.addDownstreamChangeListener(folder, refresh) function. Code example here
Clone this wiki locally