Skip to main content
Version: 3.22.0

JSON-Based UI Screen Rendering

If you prefer; there is a simple, human-readable JSON format to render/change UI screens.

They are all placed in src/entities folder.

src/entities/Management/CompanyTypes.ts

import TableFormatters from '../../common/TableFormatters';
import { Regexes } from '../../common/validations';
import { IType, ComponentType, Visibility, typeConfigWrapper, CaseStyles, IGroup } from '../../common/typeConfig';
import { ParameterOptionTemplate } from '../../common/typePresets';
import { getLocalizedText } from '../../common/localizationManager';

const { TABLE, FORM, FILTER, BG_FILTER, BG_FORM, FK_FILTER, FK_FORM } = Visibility;

let mainGroup : IGroup = {
title: getLocalizedText('MAIN_INFO_LABEL'),
defaultOpen: true
}

let contactGroup : IGroup = {
title: getLocalizedText('CONTACT_INFO_LABEL'),
defaultOpen: true
}

let contactPersonGroup : IGroup = {
title: getLocalizedText('CONTACT_PERSON_INFO_LABEL'),
defaultOpen: true
}

let otherGroup : IGroup = {
title: getLocalizedText('OTHER_INFO_LABEL'),
defaultOpen: true
}

let type: IType = {
companyId: {
label: 'companyId',
isPrimaryId: true,
typeKey: 'company'
},
companyName: {
label: getLocalizedText('COMPANY_NAME_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: mainGroup,
visibility: [FORM, TABLE, FILTER],
forceCaseTo: CaseStyles.ALL_WORDS_CAPITALIZED_CASE,
valRules: {
minLength: 3,
maxLength: 150
}
},
companyLegalTitle: {
label: getLocalizedText('COMPANY_LEGAL_TITLE_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: mainGroup,
visibility: [FORM],
forceCaseTo: CaseStyles.ALL_WORDS_CAPITALIZED_CASE,
valRules: {
acceptEmptyStrings: true,
minLength: 3,
maxLength: 150
}
},
sectorId: {
label: getLocalizedText('SECTOR_LABEL'),
typeInd: ComponentType.DROPDOWN,
group: mainGroup,
visibility: [FORM],
optionConfig: {
...ParameterOptionTemplate,
filterBy: (type, inputText) => ({
keyCode: 'SECTORS_OPTION'
}),
},
},
numberOfStaff: {
label: getLocalizedText('NUMBER_OF_STAFF_LABEL'),
typeInd: ComponentType.NUMERIC_INPUT,
group: mainGroup,
visibility: [FORM],
},
contactPerson: {
label: getLocalizedText('CONTACT_NAME_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: contactPersonGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
minLength: 2,
maxLength: 75
}
},
contactPersonTitle: {
label: getLocalizedText('JOB_TITLE_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: contactPersonGroup,
visibility: [FORM],
valRules: {
maxLength: 50
}
},
contactPersonTelephone: {
label: getLocalizedText('TELEPHONE_LABEL'),
typeInd: ComponentType.PHONE_INPUT,
group: contactPersonGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
minLength: 9,
maxLength: 20
},
},
contactPersonEmail: {
label: getLocalizedText('EMAIL_LABEL'),
group: contactPersonGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
regex: Regexes.email,
customErrMsg: getLocalizedText("ENTER_VALID_EMAIL"),
},
},
email: {
label: getLocalizedText('EMAIL_LABEL'),
group: contactGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
regex: Regexes.email,
customErrMsg: getLocalizedText("ENTER_VALID_EMAIL"),
},
},
website: {
label: getLocalizedText('WEBSITE_LABEL'),
group: contactGroup,
visibility: [FORM],
placeholder: "http://www.companyname.com",
valRules: {
acceptEmptyStrings: true,
regex: Regexes.webSite,
customErrMsg: getLocalizedText("ENTER_VALID_WEBSITE"),
},
},
telephone: {
label: getLocalizedText('TELEPHONE_LABEL'),
typeInd: ComponentType.PHONE_INPUT,
group: contactGroup,
visibility: [FORM, TABLE],
valRules: {
acceptEmptyStrings: true,
minLength: 9,
maxLength: 20
},
},
countryId: {
label: getLocalizedText("COUNTRY_LABEL"),
typeInd: ComponentType.DROPDOWN,
visibility: [FORM],
group: contactGroup,
optionConfig: {
...ParameterOptionTemplate,
filterBy: (type, inputText) => ({
keyCode: 'COUNTRY'
}),
},
onValueChanged: (value, type, initial, isFilter, that) => {
if (!isFilter && type.cityId)
that.dataManagement.fillDropdownData(type.cityId);
if (isFilter && type.cityId_filter)
that.dataManagement.fillDropdownData(type.cityId_filter);
},
},
cityId: {
label: getLocalizedText("CITY_LABEL"),
typeInd: ComponentType.DROPDOWN,
visibility: [FORM],
group: contactGroup,
optionConfig: {
...ParameterOptionTemplate,
filterBy: (type, inputText) => ({
keyCode: 'CITY',
parentValue: type.countryId.value || 0
}),
},
/*filterOptionConfig: {
...ParameterOptionTemplate,
filterBy: (type, inputText) => ({
keyCode: 'CITY',
parentValue: type.countryId_filter.value || 0
}),
},*/
onValueChanged: (value, type, initial, isFilter, that) => {
if (!isFilter && type.townId)
that.dataManagement.fillDropdownData(type.townId);
if (isFilter && type.townId_filter)
that.dataManagement.fillDropdownData(type.townId_filter);
},
},
townId: {
label: getLocalizedText("TOWN_LABEL"),
typeInd: ComponentType.DROPDOWN,
visibility: [FORM],
group: contactGroup,
optionConfig: {
...ParameterOptionTemplate,
filterBy: (type, inputText) => ({
keyCode: 'TOWN',
parentValue: type.cityId.value || 0
}),
},
/*filterOptionConfig: {
filterBy: (type, inputText) => ({
parentValue: type.cityId_filter.value || 0
}),
},*/
},
address: {
label: getLocalizedText('ADDRESS_LABEL'),
typeInd: ComponentType.TEXT_AREA,
group: contactGroup,
visibility: [FORM]
},
taxOffice: {
label: getLocalizedText('TAX_OFFICE_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: otherGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
minLength: 2,
maxLength: 50
}
},
taxNumber: {
label: getLocalizedText('TAX_NUMBER_LABEL'),
typeInd: ComponentType.FORM_CONTROL,
group: otherGroup,
visibility: [FORM],
valRules: {
acceptEmptyStrings: true,
maxLength: 20
}
},
billingAddress: {
label: getLocalizedText('BILLING_ADDRESS_LABEL'),
typeInd: ComponentType.TEXT_AREA,
group: otherGroup,
visibility: [FORM]
},
note: {
label: getLocalizedText('NOTE_LABEL'),
typeInd: ComponentType.TEXT_AREA,
group: otherGroup,
visibility: [FORM]
},
status: {
label: getLocalizedText("STATUS_LABEL"),
typeInd: ComponentType.TOGGLE,
group: otherGroup,
visibility: [TABLE, FILTER, FORM],
defaultValue: 1,
tableDataFormatter: TableFormatters.toggleFormatter,
},
}
export default type;

To get familiar with the declarative JSON format, you can practice at Demo / Management / Live Preview