Open an App Extension. An app extension consists of a combination of an HTML page and a Data Events script to open it.


OPENEXTENSION is for opening custom-build app extensions. App Extensions provide a mechanism to extend Fulcrum with custom HTML/CSS/JS and Data Events. Users can build a web page that will be opened within Fulcrum and provide a seamless transition from the form to the custom web page.

Use Cases

  • Open an application that provides custom UI for complex business logic and processing
  • Add a custom picker that provides logic or features not built in Fulcrum (image selection, custom search)
  • Custom field type (SVG area selection, custom range pickers, color ramps)
  • Summary report interface for complex inspections with verifications and warning confirmations
  • Embedding mini charts and graphs to visualize inspection results
  • Custom "sub-forms"


options Object (required) - The options for the extension

Example Data Event

ON('click', 'some_button', () => {
    url: '',
    title: 'Simple Extension',
    data: { test_value: $test_value },
    onMessage: ({ data }) => {
      SETVALUE('test_value', data.simple_result);

Example HTML

This is the HTML page hosted at

<!DOCTYPE html>
    <meta charset="utf-8" />
    <title>App Extension Example</title>

    <!-- Fulcrum extension script -->
    <script type="text/javascript">
    (()=>{var s=(e,i)=>()=>(i||e((i={exports:{}}).exports,i),i.exports);var o=s((a,r)=>{var l=new URLSearchParams(;function c(e){try{return JSON.parse(e)}catch(i){return null}}r.exports=window.Fulcrum={isExtension:l.get("extension")==="1",initialize:()=>{var i;let{params:e}=Fulcrum;,Fulcrum.url=e==null?void 0:e.url,,Fulcrum.origin=e==null?void 0:e.origin,(i=Fulcrum.onLoadOnce)==null||},load:e=>{Fulcrum.onLoadOnce=()=>{Fulcrum.params&&!Fulcrum.isLoaded&&(Fulcrum.isLoaded=!0,e({}))},Fulcrum.onLoadOnce()},send:(e,{close:i=!1}={})=>{var u;e=e!=null?e:{};let n={,url:Fulcrum.url,data:e,close:i};(u=window.webkit)!=null&&u.messageHandlers?window.webkit.messageHandlers.extensionListener.postMessage(JSON.stringify(n)):window.parent&&window.parent.postMessage({extensionMessage:n},Fulcrum.origin)},receive:e=>{let i=c(;i&&i.command==="initialize"&&!Fulcrum.params&&(Fulcrum.params=i.params,Fulcrum.initialize())},finish:e=>{Fulcrum.send(e,{close:!0})}};Fulcrum.isExtension?window.addEventListener("message",Fulcrum.receive,!1):window.addEventListener("DOMContentLoaded",Fulcrum.initialize)});o();})();
    <!-- The app extension code -->
    <script type="text/javascript">
      // the load() handler is called when the extension loads and is ready to process the data value
      Fulcrum.load(({ data }) => {
        // get a reference to the button
        const button = document.querySelector('button');

        // assign the button text to the value from Data Events
        button.textContent = `Hello ${data.test_value + 1}!`;

        // setup a click handler to finish the extension and send a result back to Fulcrum
        button.addEventListener('click', () => {
          Fulcrum.finish({ simple_result: data.test_value + 1 });