@opensrp/form-config
v0.0.20
Published
OpenSrp form configuration components
Downloads
30
Readme
Form Config
These are bunch of components that support creation and manuplation of OpenSRP configuration files.
The configuration files include:
- JSON widget validator - JSON file that holds a list of fields that cannot be removed in a certain JSON form.
- Manifest - A combination of properties that help bundle up all the files uploaded.
Instalation
yarn add @opensrp/form-config
Code Sample
You can opt to use default table styles by this file to a higher component
import '@onaio/drill-down-table/dist/table.css';
Form upload and Edit
import ConnectedUploadConfigFile from '@opensrp/form-config'
const UploadConfigFilePage = () => {
const props = {
baseURL: <OpenSRP API base url>,
draftFilesUrl: <draft files url>, // redirects here when form is upoaded
endpoint: <OpenSRP API file upload endpoint>,
formId: <form identifier>, // provided when editing else pass null
isJsonValidator: <boolean>, // true when editing or creating a json validator
getPayload: <function for generating OpenSrp API headers>,
LoadingComponent: <loading component>, // optional
validatorsUrl: <web link to json validators>,
};
return <ConnectedUploadConfigFile {...props} />
};
List manifest releases
import ConnectedManifestReleases from '@opensrp/form-config'
const ManifestReleasesPage = () => {
const props = {
baseURL: <OpenSRP API base url>,
currentUrl: <current web url>,
endpoint: <OpenSRP API manifest endpoint>,
formUploadUrl: <form upload web url>
getPayload: <function for generating OpenSrp API headers>,
LoadingComponent: <loading component>, // optional
uploadTypeUrl: <string>, // differentiate valdator and form upload eg. form-upload or validator-upload
};
return <ConnectedManifestReleases {...props} />
};
If you would like to use the equivalent Antd components
Create the list view component
import { AntdReleaseList } from '@opensrp/form-config';
const { ReleaseList } = AntdReleaseList;
const ManifestReleasesPage = () => {
const props = {
uploadFileURL: '/drafts/upload', // route to navigate to upload a draft form
viewReleaseURL: '/releases', // route to navigate to view a release record details
};
return <ReleaseList {...props} />;
};
Create the view component that displays a details record
import { AntdFilesList } from '@opensrp/form-config';
const { FileList } = AndFilesList;
const ManifestReleaseViewPage = () => {
const props = {
isJsonValidator: false,
};
return <FileList {...props} />;
};
Create the upload form component to upload a draft form
import { AntdUploadForm } from '@opensrp/form-config';
const { UploadForm } = AntdUploadForm;
const UploadDraftPage = () => {
const props = {
isJsonValidator: false, // true when editing or creating a json validator
onSaveRedirectURL: '/drafts', // redirects here when form is upoaded
};
return <UploadForm {...props} />;
};
Declare routes
import { ROUTE_PARAM_FORM_VERSION } from '@opensrp/form-config';
// releases list view
<Route path="/releases">
<ManifestReleasesPage />
</Route>;
// release record view
<Route path={`/releases/:${ROUTE_PARAM_FORM_VERSION}`}>
<ManifestReleaseViewPage />
</Route>;
// upload draft view
<Route path="/drafts/upload">
<UploadDraftPage />
</Route>;
List JSON validators and config forms
import ConnectedManifestFilesList from '@opensrp/form-config'
const JsonValidatorsPage = () => {
const props = {
baseURL: <OpenSRP API base url>,
downloadEndPoint: <OpenSrp form download endpoint>
endpoint: <OpenSRP API forms endpoint>,
fileUploadUrl: <form upload web url>
formVersion: <form version for configs to be displayed> // null for JSON validator
getPayload: <function for generating OpenSrp API headers>,
isJsonValidator: <true for JSON validator page>
LoadingComponent: <loading component>, // optional
uploadTypeUrl: <string>, // differentiate valdator and form upload eg. form-upload or validator-upload
};
return <ConnectedManifestFilesList {...props} />
};
If you would like to use the equivalent Antd component
Create the list view component
import { AntdFilesList } from '@opensrp/form-config';
const { FileList } = AntdFilesList;
const JsonValidatorsPage = () => {
const props = {
uploadFileURL: '/json-validators/upload', // route to navigate to upload form
isJsonValidator: true, // true for json validators page
};
return <FileList {...props} />;
};
Create the upload form component
import { AntdUploadForm } from '@opensrp/form-config';
const { UploadForm } = AntdUploadForm;
const UploadJsonValidatorPage = () => {
const props = {
isJsonValidator: true, // true when editing or creating a json validator
onSaveRedirectURL: '/json-validators', // redirects here when form is upoaded
};
return <UploadForm {...props} />;
};
Declare routes
import { ROUTE_PARAM_FORM_ID } from '@opensrp/form-config';
// json validators list view
<Route path="/json-validators">
<JsonValidatorsPage />
</Route>;
// edit route
<Route path={`/json-validators/upload/:${ROUTE_PARAM_FORM_ID}`}>
<UploadJsonValidatorPage />
</Route>;
// upload route
<Route path="/json-validators/upload">
<UploadJsonValidatorPage />
</Route>;
List Draft files
import ManifestDraftFiles from '@opensrp/form-config'
const DraftListPage = () => {
const props = {
baseURL: <OpenSRP API base url>,
downloadEndPoint: <OpenSrp form download endpoint>
endpoint: <OpenSRP API forms endpoint>,
fileUploadUrl: <form upload web url>
getPayload: <function for generating OpenSrp API headers>,
LoadingComponent: <loading component>, // optional
manifestEndPoint: <OpenSrp manifest endpoint>
releasesUrl: <manifest release web url>
};
return <ManifestDraftFiles {...props} />
};
If you would like to use the equivalent Antd component
Create the list view component
import { AntdDraftFileList } from '@opensrp/form-config';
const { DraftList } = AntdDraftFileList;
const DraftListPage = () => {
const props = {
uploadFileURL: '/drafts/upload', // route to navigate to upload form
onMakeReleaseRedirectURL: '/releases', // redirect url after release is made
};
return <ManifestDraftFiles {...props} />;
};
Create the upload form component
import { AntdUploadForm } from '@opensrp/form-config';
const { UploadForm } = AntdUploadForm;
const UploadDraftPage = () => {
const props = {
isJsonValidator: false, // true when editing or creating a json validator
onSaveRedirectURL: '/drafts', // redirects here when form is upoaded
};
return <UploadForm {...props} />;
};
Declare routes
import { ROUTE_PARAM_FORM_ID } from '@opensrp/form-config';
// drafts list view
<Route path="/drafts">
<JsonValidatorsPage />
</Route>;
// edit route
<Route path={`/drafts/upload/:${ROUTE_PARAM_FORM_ID}`}>
<UploadJsonValidatorPage />
</Route>;
// upload route
<Route path="/drafts/upload">
<UploadJsonValidatorPage />
</Route>;