SFDigitalServices/formio-public-config

Form manager configurations

This repo contains bits and bobs for use in Form.io form manager configurations. It's published on GitHub Pages so that files (primarily images, CSS, and JavaScript) can have public URLs.

Setup

1. Sign in as a form.io administrator on formio.sfgov.org

2. Navigate to your stage in the tabs along the top, e.g. Development

3. Select the Settings button at the bottom of the left-hand nav bar

4. Under the "Stage Settings" navigation, select "Public Configuration"

5. In the settings form:

   • Check "Enable Public Configurations"

   • In the table, add the following values:

     Key	Value
     title	(your title here)
     logo	https://sf.gov/themes/custom/sfgovpl/logo.svg
     logoHeight	56
     js	https://cdn.jsdelivr.net/gh/SFDigitalServices/formio-public-config/preview.js

   Leave the "JSON" checkboxes unchecked.

   Show me what this looks like

   

6. Select the Save button to save your changes

JavaScript

preview.js is the JavaScript that does all of the work to modify the Form Manager interface. It applies these "hacks" using mutation observers and targeting elements with specific CSS selectors. All of the individual changes are described in the object passed to the observe() function:

observe({
  '.some-selector': el => {
    el.classList.remove('blah')
    el.classList.replace('some-class', 'another-class')
  }
})

See the classList docs for documentation of the ways you can modify classes on an element without touching its className or class attribute.