Giter Club home page Giter Club logo

ukhomeoffice.hocs-frontend's Introduction

HOCS Frontend

React application and NodeJs Server for server rendered dynamic forms.

How to run

Prerequisites

  NodeJs: >= v14.15.4
  Docker: >= v18.09.2
  Docker-Compose: >= v1.23.2

Load backend services

  cd docker
  docker-compose pull
  ./scripts/infrastructure
  ./scripts/services

Install dependencies run the application

  npm install
  npm run build-dev
  npm start

Forms

HOCS Frontend consumes schemas from backend workflow services for display and validation purposes

Schema

Forms comprise of three objects.

  • The Schema defines properties of the form and includes and array of Components that describe the fields.
  • The Data is a map of key/value pairs that correspond to the fields of the form, these values are injected in to the components at run time on the client when rendering the form.
  • The Meta object contains key/value pairs of meta-data that is used outside of the form context.
 {
     schema: {
         title: 'Test Form',
         defaultActionLabel: 'Submit',
         submissionUrl: '/api/endpoint',
         fields: [...component_array]
     },
     data: {
         ...form_data
     },
     meta: {
         ...form_meta
     }
 }

Component

  {
    component: 'text',
    validation: [...validation_rules]
    props: {
      name: 'my_field',
      label: 'My Field',
      hint: 'This is a text component'
    }

Supported component types can be found in ./src/shared/common/components/forms/form-repository.jsx Supported validation types can be found in ./server.middleware/validation.js

ukhomeoffice.hocs-frontend's People

Contributors

lcairns avatar lewismuirhead avatar nickmcmahon01 avatar hubert-raich avatar markwrightbjss avatar parth-ho avatar liammacp avatar simonmitchellhod avatar zuzak avatar raysonviswas avatar agraham19 avatar paulcr-ho avatar abarker66 avatar robertdeniszczyc2 avatar edliddiard avatar philbarton avatar dependabot[bot] avatar seanreedhomeoffice avatar arobinson26 avatar leighkirkho avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.