Text
Le composant Text permet d'afficher du texte. L'objectif de ce composant est d'être réutilisé en tant qu'enfant d'autres composants.
Il a était créé pour être utilisé dans des tableaux, mais peut très bien s'utiliser seul ou comme enfant d'autre composants.
Composant seul
- Source
- Data
{
"components": [
{
"componentType": "Text",
"label": {
"value": "Mon texte",
"type": "TXT"
},
"conditionFilter": {
"value": "true",
"type": "VTL"
},
"id": "id"
}
],
"variables": []
}
{}
- Code
- Rendu
import {
type LunaticData,
type LunaticSource,
useLunatic,
LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'
type Props = {
source: LunaticSource;
data: LunaticData;
};
export function FormRenderer({ source, data }: Props) {
const { getComponents, Provider } = useLunatic(source, data, {
initialPage: '1',
});
return (
<Provider>
<LunaticComponents components={getComponents()} />
</Provider>
);
}
Loading...
Dans un tableau
- Source
- Data
{
"componentType": "Questionnaire",
"variables": [
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA11"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA21"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA31"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA12"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA22"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA32"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA13"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA23"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": null,
"EDITED": null,
"FORCED": null,
"INPUTTED": null,
"PREVIOUS": null
},
"name": "TABLEAUCLA33"
},
{
"variableType": "CALCULATED",
"expression": {
"type": "VTL",
"value": "true"
},
"name": "FILTER_RESULT_LIBELLEDUT"
},
{
"variableType": "CALCULATED",
"expression": {
"type": "VTL",
"value": "true"
},
"name": "FILTER_RESULT_TABLEAUCLA"
}
],
"components": [
{
"componentType": "Table",
"header": [
{
"label": {
"type": "VTL|MD",
"value": ""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Domaines\""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Activité\""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Chiffre d'affaire\""
}
}
],
"conditionFilter": {
"type": "VTL",
"value": "true"
},
"id": "luwhnbxk",
"page": "1",
"label": {
"type": "VTL|MD",
"value": "\"Tableau classique\""
},
"body": [
[
{
"componentType": "Text",
"conditionFilter": {
"value": "true",
"type": "VTL"
},
"id": "id-text-1",
"label": {
"type": "TXT",
"value": "Libelle 1"
}
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA11"
},
"id": "luwhnbxk-RDOP-luwhcrpg",
"maxLength": 249,
"controls": [
{
"criticality": "ERROR",
"errorMessage": {
"type": "VTL",
"value": "\"Le domaine ne doit pas être vide\""
},
"typeOfControl": "",
"control": {
"type": "VTL",
"value": "not(isnull(TABLEAUCLA11))"
}
}
]
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA12"
},
"id": "luwhnbxk-RDOP-luwhnkls",
"maxLength": 249
},
{
"componentType": "InputNumber",
"unit": "€",
"min": 0,
"max": 9999,
"response": {
"name": "TABLEAUCLA13"
},
"decimals": 0,
"id": "luwhnbxk-RDOP-luwh7btb"
}
],
[
{
"componentType": "Text",
"conditionFilter": {
"value": "true",
"type": "VTL"
},
"id": "id-text-2",
"label": {
"type": "TXT",
"value": "Libelle 2"
}
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA21"
},
"id": "luwhnbxk-RDOP-luwhmbp1",
"maxLength": 249
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA22"
},
"id": "luwhnbxk-RDOP-luwhlejc",
"maxLength": 249
},
{
"componentType": "InputNumber",
"unit": "€",
"min": 0,
"max": 9999,
"response": {
"name": "TABLEAUCLA23"
},
"decimals": 0,
"id": "luwhnbxk-RDOP-luwh4tva"
}
],
[
{
"componentType": "Text",
"conditionFilter": {
"value": "true",
"type": "VTL"
},
"id": "id-text-3",
"label": {
"type": "TXT",
"value": "Libelle 3"
}
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA31"
},
"id": "luwhnbxk-RDOP-luwhalhn",
"maxLength": 249
},
{
"componentType": "Input",
"response": {
"name": "TABLEAUCLA32"
},
"id": "luwhnbxk-RDOP-luwhd3mk",
"maxLength": 249
},
{
"componentType": "InputNumber",
"unit": "€",
"min": 0,
"max": 9999,
"response": {
"name": "TABLEAUCLA33"
},
"decimals": 0,
"id": "luwhnbxk-RDOP-luwhcilc"
}
]
],
"mandatory": false
}
],
"maxPage": "1"
}
{}
- Code
- Rendu
import {
type LunaticData,
type LunaticSource,
useLunatic,
LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'
type Props = {
source: LunaticSource;
data: LunaticData;
};
export function FormRenderer({ source, data }: Props) {
const { getComponents, Provider } = useLunatic(source, data, {
initialPage: '1',
});
return (
<Provider>
<LunaticComponents components={getComponents()} />
</Provider>
);
}
Loading...
Dans une tableau dynamique
- Source
- Data
{
"variables": [
{
"variableType": "EXTERNAL",
"name": "VARIABLE_EXT"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": [],
"EDITED": [],
"FORCED": [],
"INPUTTED": [],
"PREVIOUS": []
},
"name": "PREMIERTAB2"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": [],
"EDITED": [],
"FORCED": [],
"INPUTTED": [],
"PREVIOUS": []
},
"name": "PREMIERTAB3"
},
{
"variableType": "COLLECTED",
"values": {
"COLLECTED": [],
"EDITED": [],
"FORCED": [],
"INPUTTED": [],
"PREVIOUS": []
},
"name": "PREMIERTAB4"
}
],
"components": [
{
"componentType": "RosterForLoop",
"components": [
{
"componentType": "Text",
"label": {
"type": "VTL",
"value": "VARIABLE_EXT"
},
"id": "lvp6l8rw-RDOP-lvp7mld9",
"maxLength": 249
},
{
"componentType": "Input",
"response": {
"name": "PREMIERTAB2"
},
"id": "lvp6l8rw-RDOP-lvp75ug8",
"maxLength": 5
},
{
"componentType": "InputNumber",
"min": 0,
"max": 10000,
"response": {
"name": "PREMIERTAB3"
},
"decimals": 0,
"id": "lvp6l8rw-RDOP-lvp7i2ub"
},
{
"componentType": "InputNumber",
"min": 0,
"max": 10000,
"response": {
"name": "PREMIERTAB4"
},
"decimals": 0,
"id": "lvp6l8rw-RDOP-lvp74mc4"
}
],
"controls": [
{
"criticality": "ERROR",
"errorMessage": {
"type": "VTL|MD",
"value": "\" La valeur doit être comprise entre 0 et 10000.\""
},
"typeOfControl": "FORMAT",
"control": {
"type": "VTL",
"value": "not(not(isnull(PREMIERTAB3)) and (0>PREMIERTAB3 or 10000<PREMIERTAB3))"
},
"id": "lvp6l8rw-RDOP-lvp7i2ub-format-borne-inf-sup"
},
{
"criticality": "ERROR",
"errorMessage": {
"type": "VTL|MD",
"value": "\"Le nombre doit comporter au maximum 0 chiffre(s) après la virgule.\""
},
"typeOfControl": "FORMAT",
"control": {
"type": "VTL",
"value": "not(not(isnull(PREMIERTAB3)) and round(PREMIERTAB3,0)<>PREMIERTAB3)"
},
"id": "lvp6l8rw-RDOP-lvp7i2ub-format-decimal"
},
{
"criticality": "ERROR",
"errorMessage": {
"type": "VTL|MD",
"value": "\" La valeur doit être comprise entre 0 et 10000.\""
},
"typeOfControl": "FORMAT",
"control": {
"type": "VTL",
"value": "not(not(isnull(PREMIERTAB4)) and (0>PREMIERTAB4 or 10000<PREMIERTAB4))"
},
"id": "lvp6l8rw-RDOP-lvp74mc4-format-borne-inf-sup"
},
{
"criticality": "ERROR",
"errorMessage": {
"type": "VTL|MD",
"value": "\"Le nombre doit comporter au maximum 0 chiffre(s) après la virgule.\""
},
"typeOfControl": "FORMAT",
"control": {
"type": "VTL",
"value": "not(not(isnull(PREMIERTAB4)) and round(PREMIERTAB4,0)<>PREMIERTAB4)"
},
"id": "lvp6l8rw-RDOP-lvp74mc4-format-decimal"
}
],
"header": [
{
"label": {
"type": "VTL|MD",
"value": "\"Nom (LS)\""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Code postal (LS)\""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Capacité 2023 (LS)\""
}
},
{
"label": {
"type": "VTL|MD",
"value": "\"Capacité 2024\""
}
}
],
"conditionFilter": {
"type": "VTL",
"value": "true"
},
"id": "lvp6l8rw",
"page": "1",
"lines": {
"min": {
"type": "VTL",
"value": "2"
},
"max": {
"type": "VTL",
"value": "5"
}
},
"mandatory": false
}
],
"pagination": "question",
"lunaticModelVersion": "3.8.0",
"enoCoreVersion": "3.21.0-SNAPSHOT",
"resizing": {},
"maxPage": "1"
}
{
"EXTERNAL": {
"VARIABLE_EXT": [
"TRUC",
"BIDULE",
"CHOSE"
]
}
}
- Code
- Rendu
import {
type LunaticData,
type LunaticSource,
useLunatic,
LunaticComponents,
} from '@inseefr/lunatic';
import '@inseefr/lunatic/lib/main.css'
type Props = {
source: LunaticSource;
data: LunaticData;
};
export function FormRenderer({ source, data }: Props) {
const { getComponents, Provider } = useLunatic(source, data, {
initialPage: '1',
});
return (
<Provider>
<LunaticComponents components={getComponents()} />
</Provider>
);
}
Loading...