Gestionnaire des transactions : mises en page : options de thématisation
Les mises en page de Transaction Manager peuvent être ajustées en définissant les propriétés JSON et YAML.
Incluez le JSON suivant au niveau supérieur du JSON de mise en page :
"theme": {
"base": "slds",
"otterKit": true,
"properties": {
"body-color": "#000",
"spacing-sm": "0.15rem",
"label-color": "var(--token-color-black-500)",
"pill-radius": "2px",
"header-color": "#30578d",
"border-radius": "2px",
"body-font-size": "0.875rem",
"label-font-size": "0.75rem",
"body-font-weight": "700",
"bom-border-color": "#7e8592",
"body-border-color": "#7e8592",
"body-border-width": "0",
"button-font-color": "600",
"pill-border-color": "#30578d",
"body-border-radius": "0",
"input-border-color": "#999",
"input-border-width": "1px",
"button-border-width": "1px",
"font-weight-regular": "700",
"header-border-color": "#7e8592",
"header-logo-padding": "0.5rem",
"input-border-radius": "2px",
"internal-icon-color": "#aeaeae",
"body-wrapper-padding": "0",
"button-border-radius": "2px",
"button-neutral-color": "#30578d",
"button-primary-color": "#30578d",
"int-option-font-size": "0.875rem",
"token-color-black-500": "#444",
"combobox-option-margin": "0 0 0 10px",
"header-logo-min-height": "50px",
"pill-remove-icon-color": "#4d4d4d",
"container-border-radius": "0",
"header-margin-block-end": "0",
"token-color-neutral-950": "#aeaeae",
"combobox-option-font-size": "0.875rem",
"slds-c-button-line-height": "1.875rem",
"slds-c-input-color-border": "#000",
"button-primary-focus-color": "#0065cc",
"button-primary-hover-color": "#0065cc",
"slds-c-input-radius-border": "2px",
"button-neutral-border-color": "#30578d",
"button-primary-border-color": "#30578d",
"expand-header-border-radius": "2px",
"button-primary-disabled-color": "#666",
"button-neutral-backgroundColor": "#fff",
"button-primary-backgroundColor": "#fff",
"expand-header-border-color-focus": "#7e8592",
"button-primary-focus-border-color": "#0065cc",
"button-primary-hover-border-color": "#0065cc",
"button-neutral-focus-backgroundColor": "#fff",
"button-neutral-hover-backgroundColor": "#fff",
"button-primary-disabled-border-color": "#666",
"button-primary-focus-backgroundColor": "#fff",
"button-primary-hover-backgroundColor": "#fff",
"button-primary-disabled-backgroundColor": "#efefef",
"token-color-primary-outline-border-color": "#ff0000",
"expand-header-content-padding-inline-start": "0"
}
},YAML :
theme:
base: slds
otterKit: true
properties:
body-color: "#000"
spacing-sm: "0.15rem"
label-color: "var(--token-color-black-500)"
pill-radius: "2px"
header-color: "#30578d"
border-radius: "2px"
body-font-size: "0.875rem"
label-font-size: "0.75rem"
body-font-weight: "700"
bom-border-color: "#7e8592"
body-border-color: "#7e8592"
body-border-width: "0"
button-font-color: "600"
pill-border-color: "#30578d"
body-border-radius: "0"
input-border-color: "#999"
input-border-width: "1px"
button-border-width: "1px"
font-weight-regular: "700"
header-border-color: "#7e8592"
header-logo-padding: "0.5rem"
input-border-radius: "2px"
internal-icon-color: "#aeaeae"
body-wrapper-padding: "0"
button-border-radius: "2px"
button-neutral-color: "#30578d"
button-primary-color: "#30578d"
int-option-font-size: "0.875rem"
token-color-black-500: "#444"
combobox-option-margin: "0 0 0 10px"
header-logo-min-height: "50px"
pill-remove-icon-color: "#4d4d4d"
container-border-radius: "0"
header-margin-block-end: "0"
token-color-neutral-950: "#aeaeae"
combobox-option-font-size: "0.875rem"
slds-c-button-line-height: "1.875rem"
slds-c-input-color-border: "#000"
button-primary-focus-color: "#0065cc"
button-primary-hover-color: "#0065cc"
slds-c-input-radius-border: "2px"
button-neutral-border-color: "#30578d"
button-primary-border-color: "#30578d"
expand-header-border-radius: "2px"
button-primary-disabled-color: "#666"
button-neutral-backgroundColor: "#fff"
button-primary-backgroundColor: "#fff"
expand-header-border-color-focus: "#7e8592"
button-primary-focus-border-color: "#0065cc"
button-primary-hover-border-color: "#0065cc"
button-neutral-focus-backgroundColor: "#fff"
button-neutral-hover-backgroundColor: "#fff"
button-primary-disabled-border-color: "#666"
button-primary-focus-backgroundColor: "#fff"
button-primary-hover-backgroundColor: "#fff"
button-primary-disabled-backgroundColor: "#efefef"
token-color-primary-outline-border-color: "#ff0000"
expand-header-content-padding-inline-start: "0"Supprimer le remplissage sur le corps de la page
« body-wrapper-padding » : « 0 » dans le JSON de mise en page ci-dessus.
Étiquettes de champs de styles
« label-color » : « var(--token-color-black-500) » et
« label-font-size » : « 0.75rem » dans le JSON de mise en page ci-dessus.
Personnaliser les boutons et les étiquettes des boutons
« button-font-color » : « 600 » et
« button-font-weight » : « 700 » dans le JSON de mise en page ci-dessus.
Mise en forme des nombres
Les administrateurs peuvent utiliser la propriété minPrecision pour exiger un nombre minimum de décimales.
Vous pouvez utiliser la propriété showCurrency pour afficher ou masquer le symbole de devise.
- Précision minimale
JSON :
{ "type": "FormattedNumber", "label": "Just minPrecision", "format": { "type": "decimal", "minPrecision": 2 }, "variableName": "txn.custom.someNumber" }YAML :
type: FormattedNumber label: Just minPrecision format: type: decimal minPrecision: 2 variableName: txn.custom.someNumberDans cet exemple, si txn.custom.someNumber est défini sur 4.5, la mise en page affichera 4.50.
- showCurrency
JSON :
{ "type": "FormattedNumber", "label": "With Hidden Currency", "format": { "type": "currency", "minPrecision": 2, "showCurrency": false }, "variableName": "txn.custom.genericNum" }YAML :
type: FormattedNumber label: With Hidden Currency format: type: currency minPrecision: 2 showCurrency: false variableName: txn.custom.genericNumDans cet exemple, si txn.custom.genericNum, un type de devise défini qui affichera le symbole de devise par défaut, est défini sur 4.5, la mise en page affichera 4.50.