Make a page looking more professional

Question

Hello all,In order to collect IT Business requirements, I have created a sharepoint page based on a two columns layout.&nbsp;&nbsp;The 1st column hosts a form to collect the requirementsThe 2nd column hosts a sharepoint list showing the requirements collected ==&gt; populated from the form through power automate&nbsp;By default the page looks not very engaging and some rendering issues make it even really amateur.How can I make the form fitting properly within its column and change its background color ?&nbsp;&nbsp;I am very beginner in CSS, and would need to know how to identify the element ID of this webpart and what piece of CSS code I could use...&nbsp;Thanks in advance

robelliott · Answer

Hi Christophe (CSA75FR&nbsp;), first for the form, the theme used in the form or the background image doesn't get applied when you use the Forms web part so you are limited to using one of the&nbsp; background colours for the section on the page.&nbsp;&nbsp;Second for the list, with SharePoint Online in the modern experience you can't add custom CSS, but you can add custom column or view formatting with JSON to make the list look better. For example the images below are examples of JSON code I have added to my lists.&nbsp;The random country below is selected by a flow in Power Automate and displays the list item formatted with JSON. It has links taking the user to a Wikipedia page about the country and a&nbsp;Bing Maps map of the country:&nbsp;&nbsp;The list below has alternating colours and the JSON also converts the Harvested column from a number into a pie chart:&nbsp;&nbsp;The list below shows responses to a survey done with Forms. The JSON column formatting colour-codes each item automatically based on the answer to the question:&nbsp;&nbsp;So it seems to me that you can make a big improvement by using JSON formatting. It's not always easy to work with but there are good examples at&nbsp;https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples&nbsp;and&nbsp;https://github.com/pnp/sp-dev-list-formatting/tree/master/view-samples&nbsp;I'll do a mockup of how your list and form could look and post it here shortly.&nbsp;RobLos GallardosMicrosoft Power Automate Community Super User

csa75fr · Answer

Hi Rob&nbsp;RobElliott&nbsp;thank you so much for your answer, I can't wait seeing your mockup. about the rendering issue, do you know why the fields are truncated and how I could fix it ? thanks again !!&nbsp;

robelliott · Answer

CSA75FR&nbsp;sorry, what's being truncated?&nbsp;RobLos GallardosMicrosoft Power Automate Community Super User

csa75fr · Answer

RobElliott&nbsp; please kindly take a look on the attachment, you will notice the fields of the form are not displayed entirely, right side is truncated..&nbsp;

robelliott · Answer

CSA75FR&nbsp;I'm not sure why your form is getting truncated as in my experience it is responsive and even at a section style of one-third left it displays without any problem.&nbsp;But for the formatting on the page, the SharePoint list columns are :Title: single line of textEmail: single line of textWho: single line of textStatus: Choice (Registered, Approved, Rejected)Description: multiple lines of textBenefits: multiple lines of text&nbsp;A flow in Power Automate grabs the response and creates an item in the SharePoint list:&nbsp;I have created a new view for the list called JSON and the syntax is shown below. This needs to go into the Format Current View:&nbsp;&nbsp;{
  "$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-themeLight"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "930px",
      "border-radius": "8px",
      "background-color": "#f1dede0"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "left",
          "max-width": "360px",
          "min-width": "205px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "=[$Title]",
                "style": {
                  "display": "=if([$Title] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                }
              },
              {
                "elmType": "span",
                "txtContent": "[$Email]",
                "style": {
                  "display": "=if([$Email] == '', 'none', 'block')"
                }
              },
              {
                "elmType": "span",
                "txtContent": "='Status: ' + [$Status]",
                "style": {
                  "display": "=if([$Status] == '', 'none', 'block')",
                  "padding-top": "20px",
                  "margin-bottom": "20px"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "_comment_": "DIV TWO",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "260px"
        }
      },
      {
        "elmType": "div",
        "_comment_": "DIV THREE",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "left",
          "max-width": "310px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "='Description: ' + [$Description]",
                "style": {
                  "padding-right": "5px"
                }
              },
              {
                "elmType": "span",
                "txtContent": "='Potential Benefits: ' + [$Benefits]",
                "style": {
                  "padding-right": "5px"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "normal"
            }
          }
        ]
      }
    ]
  }
}&nbsp;&nbsp;You must make sure that there isn't a&nbsp; [$column] reference to a column that doesn't exist or the formatting will just return a blank.&nbsp;The result looks like this as shown below, which I hope you will think looks a lot better than the ugly default SharePoint list!&nbsp;&nbsp;Come back with any questions about this or if you need any further help.&nbsp;RobLos GallardosMicrosoft Power Automate Community Super User

Forum Discussion

Make a page looking more professional

Share

Resources