Variable OneBlinkReadOnlyForm

Component for rendering a OneBlink Form in read-only mode. By default, all inputs are read-only. Pass editableFormElementIds with controlled submission props (definition, submission, setFormSubmission, executedLookups) to keep selected inputs editable. Selecting a form or infoPage element makes all of its descendants editable. This component does not render the submit, cancel or save draft buttons.

It is also recommended to import the css from this library as well.

import { OneBlinkReadOnlyForm } from '@oneblink/apps-react'
import '@oneblink/apps-react/dist/styles.css'
Copy

Example

import React from 'react'
import ReactDOM from 'react-dom'
import {
FormTypes
  IsOfflineContextProvider,
  OneBlinkReadOnlyForm,
  useFormSubmissionState,
  useIsMounted,
} from '@oneblink/apps-react'
import '@oneblink/apps-react/dist/styles.css'

const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'
const formsAppId = 1
const form: FormTypes.Form = {
  id: 1,
  name: 'Name of Form',
  description: '',
  organisationId: 'abc123',
  formsAppEnvironmentId: 1,
  formsAppIds: [],
  elements: [],
  isAuthenticated: false,
  isMultiPage: false,
  isInfoPage: false,
  publishStartDate: null,
  publishEndDate: null,
  postSubmissionAction: 'FORMS_LIBRARY',
  submissionEvents: [],
  tags: [],
}

function FormContainer() {
  const isMounted = useIsMounted()
  const [
    { definition, submission, executedLookups },
    setFormSubmission,
  ] = useFormSubmissionState(form)

  const handleFormError = React.useCallback(() => {
    // handle form rendering error caused by a misconfigured form here...
  }, [isMounted])

  return (
    <OneBlinkReadOnlyForm
      googleMapsApiKey={googleMapsApiKey}
      definition={definition}
      submission={submission}
      setFormSubmission={setFormSubmission}
      executedLookups={executedLookups}
      audience="APPROVER"
      editableFormElementIds={['element-id']}
    />
  )
}

function App() {
  return (
    <IsOfflineContextProvider>
      <FormContainer />
    </IsOfflineContextProvider>
  )
}

const root = document.getElementById('root')
if (root) {
  ReactDOM.render(<App />, root)
}
Copy