How to use the solid-ui.aclControl function in solid-ui

table.setAttribute('style', 'font-size:120%; margin: 1em; border: 0.1em #ccc ;')
  var headerRow = table.appendChild(dom.createElement('tr'))
  headerRow.textContent = UI.utils.label(book) + ' - tools'
  headerRow.setAttribute('style', 'min-width: 20em; padding: 1em; font-size: 150%; border-bottom: 0.1em solid red; margin-bottom: 2em;')

  var statusRow = table.appendChild(dom.createElement('tr'))
  var statusBlock = statusRow.appendChild(dom.createElement('div'))
  statusBlock.setAttribute('style', 'padding: 2em;')
  var MainRow = table.appendChild(dom.createElement('tr'))
  var box = MainRow.appendChild(dom.createElement('table'))
  var bottomRow = table.appendChild(dom.createElement('tr'))

  context = { target: book, me: me, noun: 'address book',
  div: pane, dom: dom, statusRegion: statusBlock }

  box.appendChild(UI.aclControl.ACLControlBox5(book.dir(), dom, 'book', kb, function (ok, body) {
    if (!ok) box.innerHTML = 'ACL control box Failed: ' + body
  }))

  //
  UI.widgets.registrationControl(
    context, book, ns.vcard('AddressBook'))
    .then(function (context) {
      console.log('Registration control finished.')
        // pane.appendChild(box)
    }).catch(function (e) {UI.widgets.complain(context, e)})

  //  Output stats in line mode form
  var logSpace = MainRow.appendChild(dom.createElement('pre'))
  var log = function (message) {
    console.log(message)
    logSpace.textContent += message + '\n'

render: function (subject, dom, paneOptions) {
    paneOptions = paneOptions || {}
    var div = dom.createElement('div')
    var cardDoc = subject.doc()

    UI.aclControl.preventBrowserDropEvents(dom) // protect drag and drop

    div.setAttribute('class', 'contactPane')

    var complain = function (message) {
      console.log(message)
      div.appendChild(UI.widgets.errorMessageBlock(dom, message, 'pink'))
    }
    var complainIfBad = function (ok, body) {
      if (!ok) {
        complain('Error: ' + body)
      }
    }

    var thisPane = this

    //  Reproduction: Spawn a new instance of this app

saveNewGroup(book, name, function (success, body) {
              if (!success) {
                console.log("Error: can't save new group:" + body)
                cardMain.innerHTML = 'Failed to save group' + body
              } else {
                selectedGroups = {}
                selectedGroups[body.uri] = true
                syncGroupTable() // Refresh list of groups

                cardMain.innerHTML = ''
                cardMain.appendChild(UI.aclControl.ACLControlBox5(body, dom, 'group', kb, function (ok, body) {
                  if (!ok) cardMain.innerHTML = 'Group sharing setup failed: ' + body
                }))
              }
            })
          })

var creationContext = {folder: subject, div: creationDiv, dom: dom, statusArea: creationDiv, me: me}
    creationContext.refreshTarget = mainTable
    UI.create.newThingUI(creationContext, panes) // Have to pass panes down  newUI

    // /////////// Allow new file to be Uploaded
    var droppedFileHandler = function (files) {
      UI.widgets.uploadFiles(kb.fetcher, files, subject.uri, subject.uri, function (file, uri) {
        // A file has been uploaded
        let destination = kb.sym(uri)
        console.log(' Upload: put OK: ' + destination)
        kb.add(subject, ns.ldp('contains'), destination, subject.doc())
        mainTable.refresh()
      })
    }

    UI.aclControl.preventBrowserDropEvents(dom)

    const explictDropIcon = false
    var target
    if (explictDropIcon) {
      let iconStyleFound = creationDiv.firstChild.style.cssText
      target = creationDiv.insertBefore(dom.createElement('img'), creationDiv.firstChild)
      target.style.cssText = iconStyleFound
      target.setAttribute('src', UI.icons.iconBase + 'noun_748003.svg')
      target.setAttribute('style', 'width: 2em; height: 2em') // Safari says target.style is read-only
    } else {
      target = creationDiv.firstChild // Overload drop target semantics onto the plus sign
    }

    UI.widgets.makeDropTarget(target, null, droppedFileHandler)

    return div

statusBlock.setAttribute('style', 'padding: 2em;')
    var MainRow = table.appendChild(dom.createElement('tr'))
    var box = MainRow.appendChild(dom.createElement('table'))
    // var bottomRow = table.appendChild(dom.createElement('tr'));

    var sharingPaneContext = {
      target: subject,
      me: null,
      noun: noun,
      div: pane,
      dom: dom,
      statusRegion: statusBlock
    }
    var uri = UI.authn.currentUser()
    sharingPaneContext.me = uri
    UI.aclControl.preventBrowserDropEvents(dom)

    box.appendChild(
      UI.aclControl.ACLControlBox5(subject, context, noun, kb, function (
        ok,
        body
      ) {
        if (!ok) {
          box.innerHTML = 'ACL control box Failed: ' + body
        }
      })
    )

    div.appendChild(pane)
    return div
  }
}

// var bottomRow = table.appendChild(dom.createElement('tr'));

    var sharingPaneContext = {
      target: subject,
      me: null,
      noun: noun,
      div: pane,
      dom: dom,
      statusRegion: statusBlock
    }
    var uri = UI.authn.currentUser()
    sharingPaneContext.me = uri
    UI.aclControl.preventBrowserDropEvents(dom)

    box.appendChild(
      UI.aclControl.ACLControlBox5(subject, context, noun, kb, function (
        ok,
        body
      ) {
        if (!ok) {
          box.innerHTML = 'ACL control box Failed: ' + body
        }
      })
    )

    div.appendChild(pane)
    return div
  }
}

complain('Error: ' + body)
      }
    }

    var thisPane = this

    //  Reproduction: Spawn a new instance of this app
    var newAddressBookButton = function (thisAddressBook) {
      return UI.authn.newAppInstance(dom,
        {noun: 'address book', appPathSegment: 'contactorator.timbl.com'}, function (ws, newBase) {
          thisPane.clone(thisAddressBook, newBase, {me: me, div: div, dom: dom})
        })
    } // newAddressBookButton

    var updater = UI.store.updater
    UI.aclControl.preventBrowserDropEvents(dom)

    var t = kb.findTypeURIs(subject)

    var me = UI.authn.currentUser()

    var context = {
      target: subject,
      me: me,
      noun: 'address book',
      div: div,
      dom: dom
    } // missing: statusRegion

    // Refresh the DOM tree
    var refreshTree = function (root) {
      if (root.refresh) {

panes.getOutliner(dom).GotoSubject(subject, true, undefined, false, undefined, table)
      }
    }

    var options = {dom: dom}
    options.predicate = ns.meeting('toolList')
    options.subject = subject
    options.ordered = true
    options.orientation = 1 // tabs on LHS
    options.renderMain = renderMain
    options.renderTab = renderTab
    options.renderTabSettings = renderTabSettings
    options.backgroundColor = kb.anyValue(subject, ns.ui('backgroundColor')) || '#ddddcc'
    var tabs = mainTR.appendChild(UI.tabs.tabWidget(options))

    UI.aclControl.preventBrowserDropEvents(dom)

    UI.widgets.makeDropTarget(tabs.tabContainer, droppedURIHandler, droppedFileHandler)
    UI.widgets.makeDropTarget(iconCell, droppedURIHandler, droppedFileHandler)

    return div
  }
}

kb.fetcher.nowOrWhenFetched(groupList.uri, undefined, function (ok, message) {
                  if (!ok) return complainIfBad(ok, "Can't load group file: " + groupList + ': ' + message)
                  refreshNames()

                  if (!event.metaKey) { // If only one group has beeen selected show ACL
                    cardMain.innerHTML = ''
                    var visible = false
                    var aclControl = UI.aclControl.ACLControlBox5(group, dom, 'group', kb, function (ok, body) {
                      if (!ok) cardMain.innerHTML = 'Failed: ' + body
                    })
                    var sharingButton = cardMain.appendChild(dom.createElement('button'))
                    sharingButton.style.cssText = 'padding: 1em; margin: 1em'
                    var img = sharingButton.appendChild(dom.createElement('img'))
                    img.style.cssText = 'width: 1.5em; height: 1.5em'
                    img.setAttribute('src', UI.icons.iconBase + 'noun_123691.svg')
                    sharingButton.addEventListener('click', function () {
                      visible = !visible
                      if (visible) {
                        cardMain.appendChild(aclControl)
                      } else {
                        cardMain.removeChild(aclControl)
                      }
                    })
                  }