0

Is it possible to take the JSON of a customFormatter from a field info object and apply it when rendering a component? I would like to render choice fields as they are displayed in a list view. For example, the choice field has this CustomFormatter:

CustomFormatter : "{\"elmType\":\"div\",\"style\":{\"flex-wrap\":\"wrap\",\"display\":\"flex\"},\"children\":[{\"elmType\":\"div\",\"style\":{\"box-sizing\":\"border-box\",\"padding\":\"4px 8px 5px 8px\",\"overflow\":\"hidden\",\"text-overflow\":\"ellipsis\",\"display\":\"flex\",\"border-radius\":\"16px\",\"height\":\"24px\",\"align-items\":\"center\",\"white-space\":\"nowrap\",\"margin\":\"4px 4px 4px 4px\"},\"attributes\":{\"class\":{\"operator\":\":\",\"operands\":[{\"operator\":\"==\",\"operands\":[\"@currentField\",\"Choice 1\"]},\"sp-css-backgroundColor-BgCornflowerBlue sp-field-fontSizeSmall sp-css-color-CornflowerBlueFont\",{\"operator\":\":\",\"operands\":[{\"operator\":\"==\",\"operands\":[\"@currentField\",\"Choice 2\"]},\"sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont\",{\"operator\":\":\",\"operands\":[{\"operator\":\"==\",\"operands\":[\"@currentField\",\"Choice 3\"]},\"sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont\",{\"operator\":\":\",\"operands\":[{\"operator\":\"==\",\"operands\":[\"@currentField\",\"\"]},\"\",\"sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary\"]}]}]}]}},\"txtContent\":\"@currentField\"}],\"templateId\":\"BgColorChoicePill\"}"

which is accessible simply doing

const formatter = JSON.parse(props.customFormatter)

now the next step is to apply the logic of the formatter to the choices, is that even possible?

Choices: Array(3)
0: "Choice 1"
1: "Choice 2"
2: "Choice 3"
2
  • I think you will have to re-create CSS styling in your SPFx code. Commented Mar 24 at 13:13
  • Unless there is a solution I will just display the choice options as "grey pills". I'm thinking either there someone made an easy solution for it or it's gonna be super, not-worth-the-effort hard to do this
    – JJD
    Commented Mar 24 at 13:51

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.