formio
adding custom component to formio .
hi , i was trying to add some HTMLelements as a custom component react , but i can not find a good document about it . so , i Tried to create a custom HTML component with your side bar and save the result object to a constant and tying to store it in state of the last element of components array in form source .
now i want to current operation be automatically and start from the form Builder sidebar . how can i do it ?
i hope this issue helps me for creating this feature .
my code :
export const persianDatePicker = (className?: string) => ({
label: "تقویم فارسی",
labelPosition: "top",
placeholder: "",
description: "",
tooltip: "",
prefix: "",
suffix: "",
widget: {
type: "input",
},
inputMask: "",
displayMask: "",
applyMaskOn: "change",
allowMultipleMasks: false,
customClass: className || "",
tabindex: "",
autocomplete: "",
hidden: false,
hideLabel: false,
showWordCount: false,
showCharCount: false,
mask: false,
autofocus: false,
spellcheck: true,
disabled: false,
tableView: true,
modalEdit: false,
multiple: false,
persistent: true,
inputFormat: "plain",
protected: false,
dbIndex: false,
case: "",
truncateMultipleSpaces: false,
encrypted: false,
redrawOn: "",
clearOnHide: true,
customDefaultValue: "",
calculateValue: "",
calculateServer: false,
allowCalculateOverride: false,
validateOn: "change",
validate: {
required: false,
pattern: "",
customMessage: "",
custom: "",
customPrivate: false,
json: "",
minLength: "",
maxLength: "",
strictDateValidation: false,
multiple: false,
unique: false,
},
unique: false,
errorLabel: "",
errors: "",
key: "textField",
tags: [],
properties: {},
conditional: {
show: null,
when: null,
eq: "",
json: "",
},
customConditional: "",
logic: [],
attributes: {
"data-jdp": "true",
},
overlay: {
style: "",
page: "",
left: "",
top: "",
width: "",
height: "",
},
type: "textfield",
input: true,
refreshOn: "",
dataGridLabel: false,
addons: [],
inputType: "text",
id: el86fr${Date.now()},
defaultValue: "",
});
when i call this function , it returns an Object for a custom HTML component and i append it to state , i want to move this calling function to FormBuiler Component like other components .
Im using react 18.2 with TypeScript . my formio dependency version is :
"@formio/react": "^5.2.4-rc.1",
"formiojs": "^4.15.1",
thanks a lot for help ❤
These examples helped me answer most of my questions. I wonder if it is what you are looking for
https://formio.github.io/formio.js/app/examples/custombuilder.html
https://github.com/formio/react/issues/483#issuecomment-1581980833
