Comic/Image of the Day

Hi Kevin (kjwolf326 ), I hope you find interesting the approach I take to do something similar. On our intranet we display a random country each day to go along with a walking challenge while everyone in our company of 65,000 staff is working from home. The flag of the country is displayed together with links to the Wikipedia page about the country and also to a Bing Map of the country. When clicked each one opens in a new tab in the browser. The formatting of the random list item is done with JSON and as you can see the result looks nothing like a normal SharePoint list item!

The country is selected at random using a flow in Power Automate.

Today's country is Martinique and the list item looks like this:

So this is how it's done. To start with I have a document library called Flags and have uploaded every country's flag or in some cases like Martinique the Coat of Arms. These are available free from many websites:

I then have a list called Countries with the name of the country, the 2-letter Alpha code for the country (not used in the final result), the 3-letter Alpha code  which is a single line of text column, and a Hyperlink or Picture column with the link to the flag in the document library formatted as a Picture:

The flow to select the random country

The flow's trigger is a Recurrence schedule which in my case is set to run at 12.00 every day. The first action is a SharePoint Get items to get the countries from the list.

Next add a Compose control and enter the following expression in the Expression tab of the dynamic content box to select the random item:
body('Get_items')?['value'][rand(1,length(body('Get_items')?['value']))]

At this point you need to run flow and from the result you need to copy everything in the output of the Compose control:

Next, edit the flow again and add a Parse JSON control. For the Content field select from the dynamic content box the outputs of the Compose, click the Generate from sample button and paste in what  you copied above.

The last action in the flow is a SharePoint Update item and you select the site and list and then select the ID and Title from the outputs of the Parse JSON in the dynamic content box. That will make the randomly-selected country the most recently-modified one which is how we'll set our view in the list.

So back in the SharePoint Countries list add a new view, set the sort order to Modified descending and set the item limit to 1:

Next, format the view you've just created...

...and paste in JSON code shown below the following image:

{
  "$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",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "150px",
      "border-radius": "8px"
    },
    "children": [
      {
        "elmType": "div",
        "__comment": "DIV 1",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "160px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "150px",
              "height": "90px"
            },
            "attributes": {
              "src": "[$Flag]"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "__comment": "DIV 2",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "center",
          "max-width": "160px",
          "min-width": "95px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "=[$Title]",
            "style": {
              "display": "block"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "Library",
              "class": "ms-fontColor-themePrimary",
              "target": "_blank",
              "href": "='https://en.wikipedia.org/wiki/' + [$Title]"
            },
            "style": {
              "font-size": "25px",
              "padding-top": "5px",
              "cursor": "pointer"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Alpha3]",
            "style": {
              "display": "block",
              "padding": "5px 0 5px"
            }
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "MapPin",
              "class": "ms-fontColor-themePrimary",
              "target": "_blank",
              "href": "='https://www.bing.com/maps/?v=2&where1=' + ( [$Title] + ' ')"
            },
            "style": {
              "font-size": "25px",
              "padding-top": "5px",
              "cursor": "pointer"
            }
          }
        ]
      }
    ]
  }
}

You'll see that the code displays the Title, Alpha3 and Flag columns in the list and I've set the image size of the flag to what I want as the image in the document library is quite a bit bigger. You'll also see in the JSON code how the links to the Bing map and Wikipedia page are constructed.

On the page itself I have added a List web part, selected the Countries list with the Today view.

So I hope that gives you some idea of what you can do and you can adjust it for your cartoons and images. Come back with any questions about all this.

Rob
Los Gallardos
Microsoft Power Automate Community Super User