0

the tiles of this json display vertically, one under the other, i can't figure how to display them horizontally, one on the right of the other. Is it related to "flex-direction" ? Thxs`

{

"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "comment": "MAIN DIV", "attributes": { "class": "ms-bgColor-neutralLighter" }, "style": { "display": "flex", "flex-wrap": "wrap", "padding": "20px", "margin-bottom": "16px", "max-width": "300px", "border-radius": "8px"

},
"children": [
  {
    "elmType": "div",
    "__comment": "GAUCHE",
    "style": {
      "flex-grow": "1",
      "flex-direction": "column",
      "flex-wrap": "wrap",
      "max-width": "250px"
    },
    "children": [
      {
        "elmType": "span",
        "txtContent": "=[$field_0]",
        "style": {
          "font-weight": "bold",
          "font-size": "16px",
          "color": "#FFFFFF",
          "background-color": {
            "operator": ":",
            "operands": [
              {
                "operator": "==",
                "operands": [
                  "[$field_0]",
                  "One TSC"
                ]
              },
              "#FF7700",
              {
                "operator": ":",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "[$field_0]",
                      "Make or Buy"
                    ]
                  },
                  "#50BE87",
                  {
                    "operator": ":",
                    "operands": [
                      {
                        "operator": "==",
                        "operands": [
                          "[$field_0]",
                          "Performance"
                        ]
                      },
                      "#4BB4E6",
                      {
                        "operator": ":",
                        "operands": [
                          {
                            "operator": "==",
                            "operands": [
                              "[$field_0]",
                              "Formation - Consignes"
                            ]
                          },
                          " #FFB4E6",
                          {
                            "operator": ":",
                            "operands": [
                              {
                                "operator": "==",
                                "operands": [
                                  "[$field_0]",
                                  "Poste de travail"
                                ]
                              },
                              "#FFD200",
                              "#800080"
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          "border-radius": "20px",
          "padding": "5px 30px"
        }
      },
      {
        "elmType": "div",
        "txtContent": "=[$Title]",
        "style": {
          "font-weight": "bold",
          "font-size": "16px",
          "color": "#FF7700",
          "white-space": "normal",
          "padding-top": "10px",
          "padding-left": "1px"
        }
      }
    ]
  },
  {
    "elmType": "div",
    "__comment": "MILIEU",
    "style": {
      "flex-grow": "1",
      "display": "flex",
      "flex-direction": "column",
      "flex-wrap": "nowrap",
      "padding-top": "20px",
      "max-width": "300px",
      "min-width": "205px"
    },
    "children": [
      {
        "elmType": "div",
        "_comment": "DIV_ACTION",
        "style": {
          "display": "flex",
          "flex-direction": "column"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "flex-direction": "row"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "BullseyeTarget"
                },
                "style": {
                  "font-size": "14px",
                  "padding-right": "5px",
                  "color": "grey"
                }
              },
              {
                "elmType": "span",
                "txtContent": "Actions",
                "style": {
                  "font-size": "14px",
                  "color": "grey"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "txtContent": "=[$field_2]",
            "style": {
              "font-size": "14px",
              "font-weight": "bold",
              "white-space": "normal",
              "word-break": "break-word",
              "display": "-webkit-box",
              "text-overflow": "ellipsis",
              "overflow": "hidden",
              "word-wrap": "break-word"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "_comment": "DIV_PROGRESSION",
        "style": {
          "display": "block",
          "padding-top": "20px"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Financial"
            },
            "style": {
              "font-size": "14px",
              "padding-right": "5px",
              "color": "grey"
            }
          },
          {
            "elmType": "span",
            "txtContent": "Avancement",
            "style": {
              "font-size": "14px",
              "color": "grey"
            }
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "18px",
              "padding-top": "5px"
            },
            "children": [
              {
                "elmType": "span",
                "attributes": {
                  "title": "Début du projet",
                  "iconName": "=if([$Progression] < 1, 'CircleRing', 'SkypeCircleCheck')",
                  "class": "='ms-fontColor-' + if([$Progression] == 1, 'orangeLighter', if([$Progression] > 1, 'sharedOrange10', 'gray50'))"
                },
                "style": {
                  "padding": "0 2px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "Entre 20% et 40% d'avancement",
                  "iconName": "=if([$Progression] < 2, 'CircleRing', 'SkypeCircleCheck')",
                  "class": "='ms-fontColor-' + if([$Progression] == 2, 'orangeLighter', if([$Progression] > 2, 'sharedOrange10', 'gray50'))"
                },
                "style": {
                  "padding": "0 2px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "Entre 40% et 60% d'avancement",
                  "iconName": "=if([$Progression] < 3, 'CircleRing', 'SkypeCircleCheck')",
                  "class": "='ms-fontColor-' + if([$Progression] == 3, 'orangeLighter', if([$Progression] > 3, 'sharedOrange10', 'gray50'))"
                },
                "style": {
                  "padding": "0 2px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "Entre 60% et 80% d'avancement",
                  "iconName": "=if([$Progression] < 4, 'CircleRing', 'SkypeCircleCheck')",
                  "class": "='ms-fontColor-' + if([$Progression] == 4, 'orangeLighter', if([$Progression] > 4, 'sharedOrange10', 'gray50'))"
                },
                "style": {
                  "padding": "0 2px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "title": "Fin du projet",
                  "iconName": "=if([$Progression] < 5, 'CircleRing', 'SkypeCircleCheck')",
                  "class": "='ms-fontColor-' + if([$Progression] == 5, 'orangeLighter', if([$Progression] > 5, 'sharedOrange10', 'gray50'))"
                },
                "style": {
                  "padding": "0 2px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "_comment": "DIV_DELAI",
        "attributes": {
          "class": "sp-card-displayColumnContainer"
        },
        "style": {},
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "Calendar"
            },
            "style": {
              "font-size": "14px",
              "padding-right": "5px",
              "color": "grey",
              "padding-top": "20px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "Délai",
            "style": {
              "color": "grey",
              "font-size": "14px"
            }
          },
          {
            "elmType": "p",
            "attributes": {
              "title": "[$field_3]",
              "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
            },
            "txtContent": "=if ([$field_3] == '', '–', [$field_3])",
            "style": {
              "font-weight": "bold",
              "font-size": "14px",
              "align-items": "top"
            }
          }
        ]
      }
    ]
  },
  {
    "elmType": "div",
    "__comment": "DROITE",
    "style": {
      "flex-grow": "1",
      "display": "flex",
      "flex-direction": "column",
      "flex-wrap": "wrap",
      "align-items": "left",
      "max-width": "250px",
      "min-width": "205px",
      "padding-top": "20px"
    },
    "children": [
      {
        "elmType": "div",
        "_comment": " DIV_PORTEUR",
        "style": {
          "display": "block"
        },
        "children": [
          {
            "elmType": "span",
            "attributes": {
              "iconName": "Telemarketer"
            },
            "style": {
              "font-size": "14px",
              "padding-right": "5px",
              "color": "grey"
            }
          },
          {
            "elmType": "span",
            "txtContent": "Porteur",
            "style": {
              "font-size": "14px",
              "color": "grey"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "align-items": "center",
              "padding-top": "5px"
            },
            "children": [
              {
                "elmType": "img",
                "attributes": {
                  "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$Porteur.email]",
                  "title": "=[$Porteur.title]"
                },
                "style": {
                  "border-radius": "50%",
                  "margin-right": "8px",
                  "border": "1px solid gray"
                }
              },
              {
                "elmType": "div",
                "txtContent": "=[$Porteur.title]",
                "style": {
                  "font-weight": "bold"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "_comment": "DIV_CONTRIBUTEUR",
        "attributes": {
          "class": "sp-card-displayColumnContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "Touch"
            },
            "style": {
              "font-size": "14px",
              "padding-right": "5px",
              "color": "grey",
              "padding-top": "20px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "Contributeur(s)",
            "style": {
              "color": "grey",
              "font-size": "14px",
              "padding-top": "20px"
            }
          },
          {
            "elmType": "p",
            "attributes": {
              "title": "[$field_6]",
              "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
            },
            "txtContent": "=if ([$field_6] == '', '–', [$field_6])",
            "style": {
              "font-weight": "bold",
              "font-size": "14px"
            }
          }
        ]
      }
    ]
  },
  {
    "elmType": "div",
    "_comment": "DIV_DOCUMENT",
    "style": {
      "display": "flex",
      "flex-direction": "column"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "flex-direction": "row"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "iconName": "Puzzle"
            },
            "style": {
              "font-size": "14px",
              "padding-right": "5px",
              "color": "grey",
              "padding-top": "20px"
            }
          },
          {
            "elmType": "span",
            "txtContent": "En savoir +",
            "style": {
              "color": "grey",
              "font-size": "14px",
              "padding-top": "20px"
            }
          }
        ]
      },
      {
        "elmType": "a",
        "attributes": {
          "href": "[$Document]",
          "title": "[$Document]",
          "class": "ms-fontColor-neutralPrimary sp-card-content  sp-card-multiline"
        },
        "txtContent": "=if ([$Document] == '', 'Pas de document pour cette carte', 'Afficher la pièce jointe')",
        "style": {
          "height": "40px",
          "color": "#FF7700",
          "font-size": "14px"
        }
      }
    ]
  }
]

} }

1 Answer 1

0

See: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

flex-direction: column which will stack the flex children vertically. To display them horizontally, change it to flex-direction: row

Try this and let me know if it helps.

1
  • Hello and thank you, i tried to change flex-direction to row, but it doesn't display like i want : i d like to display items just like in basic view gallery where each card containing all the items is positionned side by syde horizontally, Maybe i should not use "row formatter" ?
    – Hervé
    Jan 13 at 0:32

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.