Added hyperlink-embed (#837)

* Added hyperlink-embed

* Replacing images

* Minor update

* Minor update

column-samples/hyperlink-embed/README.md

@@ -0,0 +1,64 @@
+# Displaying Embedded Content Using the `embed` Action
+
+## Summary
+
+This sample demonstrates displaying embedded content using the `embed` action.
+
+![screenshot of the sample](./assets/screenshot.png)
+
+> [!NOTE]  
+> - This sample and the `embed` action are only available in the newer version of the Microsoft Lists App.
+
+## Prerequisites
+
+### Allowing Embedding in HTML Field Security Settings
+
+To embed content, the target site must be allowed for embedding. For guidance on how to allow embedding, please refer to [Allow or restrict the ability to embed content on SharePoint Lists using custom formatters](https://go.microsoft.com/fwlink/p/?linkid=2258033).
+
+If you try to embed a site that is not allowed to be embedded, the following error screen will appear:
+
+![screenshot of the error screen when target site is not allowed to embed](./assets/not-allowed-screen.png)
+
+### Obtaining and Setting the Embedding URL
+
+The URL in the hyperlink column must be set to an embedding URL. This URL is usually found in the `src` attribute of the `iframe` element.
+
+For example, the embedding URL for YouTube can be obtained as follows:
+
+1. Open the desired video on YouTube
+1. Select the **Share** button
+1. Select the **Embed** button
+1. Copy the URL from the `src` attribute in the embed code
+
+    ![instructions on how to get the embedding URL for YouTube videos](./assets/youtube-embed-url.png)
+
+If the URL is not an embedding URL, the following error screen may appear:
+
+![screenshot of the error screen if the URL is not an embedding URL](./assets/refused-screen.png)
+
+## View requirements
+
+This format can be applied to a Hyperlink column.
+
+## Sample
+
+Solution|Author(s)
+--------|---------
+hyperlink-embed.json | [Tetsuya Kawahara](https://github.com/tecchan1107) ([@techan_k](https://twitter.com/techan_k))
+
+## Version history
+
+Version |Date            |Comments
+--------|----------------|--------
+1.0     |August 27, 2024 |Initial release
+
+## Disclaimer
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Additional notes
+
+- The `embed` action is described in [Formatting syntax reference - customRowAction](https://learn.microsoft.com/sharepoint/dev/declarative-customization/formatting-syntax-reference#customrowaction)
+
+<img src="https://pnptelemetry.azurewebsites.net/list-formatting/column-samples/hyperlink-embed" />

column-samples/hyperlink-embed/assets/sample.json

@@ -0,0 +1,79 @@
+[
+  {
+    "name": "pnp-list-formatting-hyperlink-embed",
+    "reponame": "hyperlink-embed",
+    "source": "pnp",
+    "title": "Displaying embedded content using the embed action",
+    "shortDescription": "This sample demonstrates displaying embedded content using the embed action.",
+    "url": "https://github.com/pnp/List-Formatting/tree/master/column-samples/hyperlink-embed",
+    "longDescription": [
+      "This sample demonstrates displaying embedded content using the embed action."
+    ],
+    "creationDateTime": "2024-08-27T00:00:00.000Z",
+    "updateDateTime": "2024-08-27T00:00:00.000Z",
+    "products": [
+      "SharePoint",
+      "Microsoft Lists"
+    ],
+    "metadata": [
+      {
+        "key": "LIST-SAMPLE-TYPE",
+        "value": "Column"
+      },
+      {
+        "key": "SHAREPOINT-COMPATIBILITY",
+        "value": "SharePoint Online"
+      },
+      {
+        "key": "SAMPLE-CATEGORIES",
+        "value": ""
+      },
+      {
+        "key": "LIST-COLUMN-TYPE",
+        "value": "Hyperlink"
+      },
+      {
+        "key": "FORMATTING-TOKENS",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-OPERATORS",
+        "value": ""
+      },
+      {
+        "key": "FORMATTING-ACTIONS",
+        "value": "embed"
+      },
+      {
+        "key": "FORMATTING-FEATURES",
+        "value": ""
+      },
+      {
+        "key": "CLASSES",
+        "value": "ms-fontColor-themeDarker--hover, ms-fontColor-themePrimary, ms-fontSize-mi, ms-fontSize-s"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/hyperlink-embed/assets/screenshot.png",
+        "alt": "screenshot"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "tecchan1107",
+        "pictureUrl": "https://github.com/tecchan1107.png",
+        "name": "Tetsuya Kawahara"
+      }
+    ],
+    "references": [
+      {
+        "name": "Use column formatting to customize SharePoint",
+        "description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how its displayed to users who browse the list.",
+        "url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
+      }
+    ]
+  }
+]

column-samples/hyperlink-embed/hyperlink-embed.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
+  "elmType": "div",
+  "children": [
+    {
+      "elmType": "div",
+      "style": {
+        "display": "=if(@currentField,'','none')",
+        "margin-left": "8px",
+        "margin-right": "8px"
+      },
+      "attributes": {
+        "class": "ms-fontColor-themePrimary"
+      },
+      "children": [
+        {
+          "elmType": "span",
+          "txtContent": "@currentField.desc",
+          "style": {
+            "cursor": "pointer",
+            "text-decoration": "underline"
+          },
+          "attributes": {
+            "class": "ms-fontColor-themeDarker--hover ms-fontSize-s",
+            "title": "Click to open callout with embedded content."
+          },
+          "customRowAction": {
+            "action": "embed",
+            "actionInput": {
+              "src": "@currentField",
+              "height": "360",
+              "width": "640"
+            }
+          }
+        },
+        {
+          "elmType": "span",
+          "style": {
+            "padding-left": "3px"
+          },
+          "attributes": {
+            "iconName": "ActionCenter",
+            "class": "ms-fontSize-mi"
+          }
+        }
+      ]
+    }
+  ]
+}