SharePoint

  When we need to customise the Quick link box, we need to find what is the Aria-Label value. Right click on the Quick link icon and select "inspect" A list of code will be shown: Find the Aria-label attribute and copy the value. The value of Link D is "Link D.." Note: When you change the icon using image and icon, the format of the value is different. So, do not assume but try to look for the value here. There will not be any error message if you put the wrong label name or code into the Modern Script Editor.

You can easily write css script using Modern Script Editor to change the Quick Link Background Colour, Font Colour, border style and more. Here, i would give you a guide to change the Background colour and Border-radius. Add a Quick Link and change the Layout options to "Tiles". Add the links to your Quick Links and it will show in box but all in same colour which is your Theme colour. Add a Modern Script Editor on top of the Quick Links: Enter the Code: <style type="text/css"> a[aria-label="Link A.  "] {         background-color: #FF91A4 !important;     } a[aria-label="Link B.  "] {         background-color: #83C760 !important;     } a[aria-label="Link C.  "] {         background-color: #66B032 !important;     } a[aria-label="Link D.  "] {         background-color: #4EA217 !important;     } </script> Then Click "Save" and "Publish". You will see this Add Curvy Box with Background Colour You can

There is few ways to go: 1. Use Hero Webpart Select one picture and link to your video. The play button of the video become square. You have to click square only it play. 2. Use embed code webpart <iframe width="693" height="400" src="/video path/video.mp4"      frameborder="0" allowfullscreen="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe> It will auto play when mouse over.

Microsoft SharePoint has a list of standard colour to be use. It created a standard class for the font, border and background. You can feel the colour and size below: a)  fluent-ui-core-color b)  Modern Class You can also add icon into your JSON  a)  Microsoft Fluent Icon With this list, you can easily plug into your json and start format your list view and column view. You can also add --hover to each of the class. When mouse hover over, it will change to the class you specify with --hover. How to format Column for SharePoint List 1. First, go to your listing --> right click your field --> Go to Column Settings --> Format this Column 2. Select Format Columns Tab. Make sure the Column is the field that you wanted to format --> Then click "Advance mode" and number 3 screen will appear. 3. Paste below JSON code to the box no3: How to write JSON code to format Column for SharePoint List 1. Example of Formatting title background to Red and change text to a link I get

  When i read from Microsoft website, it is written that it only support http, https and mailto links only. Microsoft link here . Then i try to change from mailto: to tel: and it works. 1. First, go to your listing --> right click your field --> Go to Column Settings --> Format this Column 2. Select Format Columns Tab. Make sure the Column is the field that you wanted to format --> Then click "Advance mode" and number 3 screen will appear. 3. Paste below JSON code to the box no3: { "$schema" : "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json" , "elmType" : "a" , "attributes" : { "href" : { "operator" : "+" , "operands" : [ "tel:" , "=@currentField" ] } }, "txtContent" : "@currentField" } To do mailto:, you just replace tel: to mailto:. Click “Save” butt

When I started to write my JSON formatting, workflows or other customise code, my code keep not working or show nothing. They did not show me any error message when my field name is not correct.  Therefore, I have to find the Internal Name of the field as I remember i changed the column name before. You will be frustrate as your code is not working. Here is how you check: 1. Go to you list --> Right click the list  There will be 3 options (Delete, Settings and Details) 2. Go to Settings 3. Under the Columns, Click on the field that you wish to know the internal Field: 4. You can see on the link: The field name is the Field=Title You field internal name is Title