How to use mson - 10 common examples

componentDidMount() {
    // Allows us to listen to back and forward button clicks
    this.unlisten = this.props.history.listen(this.onLocation);

    if (registrar.client) {
      // Wait for the session to load before loading the initial component so that we can do things
      // like route based on a user's role
      registrar.client.user.awaitSession();
    }

    // Load the correct component based on the initial path
    this.onLocation(this.props.location);

    // TODO: is this too inefficient in that it cascades a lot of unecessary events? Instead, could:
    // 1. move more logic to app layer so that only cascade when need new window 2. use something
    // like a global scroll listener that the component can use when it is active
    window.addEventListener('scroll', e => {
      if (this.state.menuItem) {
        this.state.menuItem.content.emit('scroll', e);
      }
    });

const values = this.getValues();
      console.log('submitting', values);

      globals.displaySnackbar(
        `Submitted ${values.firstName} ${values.lastName}`
      );
    });

    this.on('cancel', () => {
      // Redirect home
      globals.redirect('/');
    });
  }
}

compiler.registerComponent('app.ContactNoMSON', ContactNoMSON);

block: false
        }),
        new TextField({ name: 'lastName', label: 'Last Name', required: true }),
        new EmailField({ name: 'email', label: 'Email' }),
        new ButtonField({
          name: 'import',
          label: 'Import',
          icon: 'ImportContacts'
        }),
        new ButtonField({
          name: 'submit',
          label: 'Submit',
          type: 'submit',
          icon: 'Save'
        }),
        new ButtonField({ name: 'cancel', label: 'Cancel', icon: 'Cancel' })
      ]
    });

    this.on('import', () => {
      this.setValues({
        firstName: 'Prince',
        lastName: 'Nelson',
        email: 'prince@example.com'
      });
    });

    this.on('submit', () => {
      // TODO: do something like contact an API

      const values = this.getValues();
      console.log('submitting', values);

this.on('submit', () => {
      // TODO: do something like contact an API

      const values = this.getValues();
      console.log('submitting', values);

      globals.displaySnackbar(
        `Submitted ${values.firstName} ${values.lastName}`
      );
    });

export default async app => {
  // Was the client registered?
  if (registrar.client) {
    // Make sure we load the session before doing any rendering so that components can do their
    // initial rendering based on the user's authentication status
    await registrar.client.user.awaitSession();
  }

  ReactDOM.render(
    ,
    document.getElementById('root')
  );
  registerServiceWorker();
};

export default async app => {
  // Was the client registered?
  if (registrar.client) {
    // Make sure we load the session before doing any rendering so that components can do their
    // initial rendering based on the user's authentication status
    await registrar.client.user.awaitSession();
  }

  ReactDOM.render(
    ,
    document.getElementById('root')
  );
  registerServiceWorker();
};

items.forEach((item, index) => {
      // Has access to item?
      if (
        (!item.roles ||
          (registrar.client && registrar.client.user.hasRole(item.roles))) &&
        item.hidden !== true
      ) {
        submenus.push(
          
        );
      }
    });
    return submenus;

sortOptions() {
    const { component } = this.props;
    if (component && component.get('form')) {
      const form = component.get('form');
      const fieldsCanAccess = access.fieldsCanAccess('read', form);
      const fields = [];
      form.eachField(field => {
        const name = field.get('name');

        // Do we have access to the field? Allowed to sort? Not hidden? Not a button?
        if (
          fieldsCanAccess[name] !== undefined &&
          !field.get('forbidSort') &&
          !field.get('hidden') &&
          !(field instanceof ButtonField)
        ) {
          fields.push({
            value: (form.isDefaultField(name) ? '' : 'fieldValues.') + name,
            label: field.get('label')
          });
        }

calcFieldsCanAccess() {
    const { component, mode } = this.props;
    const canDowngrade = true;
    const fieldsCanAccess = access.fieldsCanAccess(
      // Default to update so that access control has a sensible default
      mode ? mode : 'update',
      component,
      null,
      canDowngrade
    );

    // We need to set the ignoreErrs state as there may be a field that is not accessible that is
    // generating an error.
    for (const field of component.getFields()) {
      const ignoreErrs = fieldsCanAccess[field.get('name')] === undefined;
      field.set({ ignoreErrs });
    }

    return fieldsCanAccess;
  }

import compiler from 'mson/lib/compiler';
import * as components from './components';
import globals from 'mson/lib/globals';
import uiComponents from '../components';
import FieldEditorForm from 'mson/lib/form/field-editor-form';
import FieldEditorFormUI from '../field-editor-form';
import FormEditor from 'mson/lib/form/form-editor';
import FormEditorUI from '../form-editor';
import FormBuilder from 'mson/lib/form/form-builder';

// Set the site key when using the ReCAPTCHAField
globals.set({ reCAPTCHASiteKey: '6LdIbGMUAAAAAJnipR9t-SnWzCbn0ZX2myXBIauh' });

// Register optional core components
compiler.registerComponent('FieldEditorForm', FieldEditorForm);
uiComponents.FieldEditorForm = FieldEditorFormUI;
compiler.registerComponent('FormEditor', FormEditor);
uiComponents.FormEditor = FormEditorUI;
compiler.registerComponent('FormBuilder', FormBuilder);

// Register all the components
for (let name in components) {
  let component = components[name];
  compiler.registerComponent(component.name, component);
}

// Instantiate the app
const app = compiler.newComponent({