json_page_builder v1.0.8

Repo Link:-- https://dpwhotfsonline.visualstudio.com/DTLP/_git/DPW-Page-Builder

How To Use Step 1:- Get Permission

a) create .npmrc file and add below text

    registry=https://dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/registry/ 

    always-auth=true

    ; begin auth token
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/registry/:username=dpwhotfsonline 
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/registry/:_password= [paste your token here]
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/registry/:email=npm  requires email to be set but doesnt use the value
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/:username=dpwhotfsonline 
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/:_password= [paste your token here]
    //dpwhotfsonline.pkgs.visualstudio.com/_packaging/dpw-uds-components/npm/:email=npm  requires email to be set but doesnt use the value
    ; end auth token

b) Craete your azure auth token by following below Steps
    1) Goto https://dev.azure.com/dpwhotfsonline/DTLP
    2) Click on User Settings(2nd Icon from top right corner)
    3) Click on Personal Access Tokens
    4) Click on New Token 
    5) Feel all details in the popup and create the token
    6) copy above created token and convert it base64 encoding
    7) Paste the base64 encoded token into .npmrc file.

c) Get Access of the UDS Component Artifacts

Step 2:- Install Page Builder Library

npm i @dpw/dpw_page_builder

Step 3:- Use below Example for simple form generation.

import React from 'react'; import { DPWFormBuilder, useHookForm } from '@dpw/dpw_page_builder';

const JSON = { title: 'Test Title', sections: [ { title: { defaultLabel: 'Section 1' }, type: 'box', fields: [ { type: 'input', label: 'Input 1', name: 'input1', validators: { type: 'required', value: true, errorMessage: 'This field is required.' }, { type: 'maxLength', value: 5, errorMessage: 'Max 5 digits long.' }, { type: 'custom', validatorFuncName: 'validateEmail' } }, { type: 'input', label: 'Input 2', name: 'input2' }, { type: 'auto-complete', label: 'Auto Complete', name: 'input3', meta: { autocompleteProps: { labelKey: 'title', valueKey: 'id', dataSource: 'fetchDataFromAPI', allowFreeText: false, isThirdPartyApi: true } } }, { type: 'date-time', label: 'Date and Time*', name: 'do_date', meta: {} } ] }, { title: { defaultLabel: 'Section 2' }, type: 'accordion', fields: { type: 'input', name: 's1i1', label: 'Section 2 input' } } ] };

const fetchDataFromAPI = async (val) => { const res = await fetch('https://dummyjson.com/products/search?q=' + val); const result = await res.json(); return { data: result?.products }; };

export const Example = () => { const addSection = (append) => { append({}); }; const methods = useHookForm({ defaultValues: { inpt1: 'test', input2: 'ttt' } }); const functionMapper = { fetchDataFromAPI, addSection }; return (

<div style={{ margin: '60px' }}>
  <DPWFormBuilder
    uiJsonSchema={JSON}
    hookFormMethods={methods}
    functionMapper={functionMapper}
  >
    <button > Submit</button>
  </DPWFormBuilder>
</div>

); };

export default Example;