In my previous blog about image columns in SharePoint, I explained all you need to know about New Image column type in SharePoint online including how to create an image column, how to add image to a list item, where the Images will be stored, etc.

You can add one image per SharePoint list item using SharePoint image column and the images are stored in Site Assets library by default. Using SharePoint online out of the box capabilities, there is no way to download the images from SharePoint list image column. In this blog, I will demonstrate how to create add a button within a SharePoint Online/Microsoft Lists modern experience view which downloads the image from SharePoint image column.

You can use below JSON to add a button in SharePoint online list column to download the image from image column in same list. This JSON formatting can be applied to any existing column in your SharePoint online list OR if you want to create a new column and then apply JSON formatting, follow the steps given in this blog: Working with SharePoint Online/Microsoft List Comments using JSON Formatting 

{
	"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
	"elmType": "button",
	"style": {
		"border-radius": "5px",
		"margin": "5px 0px",
		"padding": "0px",
		"border": "none",
		"display": "=if([$Image.serverRelativeUrl]=='','none','')"
	},
	"attributes": {
		"class": "ms-bgColor-themePrimary"
	},
	"children": [
		{
			"elmType": "a",
			"style": {
				"text-decoration": "none",
				"padding": "12px 0px",
				"width": "100%"
			},
			"attributes": {
				"href": "=@currentWeb+'/_layouts/15/download.aspx?sourceurl='+if([$Image.serverRelativeUrl],[$Image.serverRelativeUrl],@currentWeb+'/Lists/**YOUR-LIST-NAME**/Attachments/'+[$ID]+'/'+[$Image.fileName])",
				"target": "_blank",
				"class": "ms-fontColor-white ms-fontSize-m"
			},
			"children": [
				{
					"elmType": "span",
					"style": {
						"display": "inline-block",
						"padding": "0 4px"
					},
					"attributes": {
						"iconName": "Download"
					}
				},
				{
					"elmType": "span",
					"txtContent": "Download"
				}
			]
		}
	]
}

Where [$Image] is the internal name of your SharePoint image column. Also, make sure to edit the above JSON and replace the **YOUR-LIST-NAME** placeholder with your list’s name, as it appears in the list URL (including special characters).

This SharePoint JSON formatting code adds a button within a SharePoint Online/Microsoft Lists modern experience view which downloads the image from SharePoint image column:

Above JSON is also available on GitHub in PnP List Formatting Repository at: Download Image from SharePoint Image column.

Learn More

• SharePoint Online: Download files from document library using JSON formatting
• SharePoint JSON formatting: Check if date & time column is blank/empty
• SharePoint: Replace All Occurrences of Substring in a String using JSON Formatting
• SharePoint: Highlight selected list item rows using JSON formatting

SharePoint Online is a powerful platform for managing and sharing documents and other types of content within an organization. One of the key features of SharePoint Online is its ability to use JSON View formatting to customize the look and feel of lists and libraries.

However, applying JSON View formatting can be a time-consuming and repetitive task, especially if you need to apply the same formatting to multiple sites or lists. Fortunately, we have a command-line tool called CLI for Microsoft 365 that makes it easy to automate this process.

In my previous blogs we saw how to apply SharePoint online JSON view formatting using SharePoint REST API and PnP PowerShell. In this blog post, we will explore how to use CLI for Microsoft 365 to apply JSON View formatting to SharePoint Online lists.

The first step is to install CLI for Microsoft 365. You can do this by following the instructions on the official documentation page: CLI for Microsoft 365 – Installation

Then you can use below CLI for Microsoft 365 script to apply JSON View formatting to your SharePoint online list:

# Display name of SharePoint list
$listName = "Ganesh Sanap Blogs"

# Name of SharePoint list view
$viewName = "All Items"

# JSON to apply to view formatting
$jsonViewFormatting = @'
{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
    "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--blocked', '')"
}
'@

# Get Credentials to connect
$m365Status = m365 status
if ($m365Status -match "Logged Out") {
   m365 login
}

# Apply JSON view formatting
m365 spo list view set --webUrl $siteUrl --listTitle $listName --title $viewName --CustomFormatter $jsonViewFormatting

Where [$DueDate] is the internal name of your SharePoint column.

Once you run above script successfully and navigate to SharePoint list view, you will see that new JSON view formatting is applied to your SharePoint online list view using CLI for Microsoft 365:

Conclusion

Using CLI for Microsoft 365, you can easily apply JSON View formatting to your SharePoint Online lists, saving time and reducing the risk of errors. By following the steps outlined in this blog post, you can quickly get started with using CLI for Microsoft 365 to apply JSON View formatting to your SharePoint Online lists.

Learn more

• SharePoint Online: Apply JSON View formatting using PnP PowerShell
• SharePoint Online: Empty Recycle Bin using PnP PowerShell
• Change SharePoint Online List URL using PnP PowerShell
• Update SharePoint Page Banner Image using PnP PowerShell
• Add/Update image columns in SharePoint/Microsoft Lists using PnP PowerShell
• SharePoint Online: How to change the placeholder text in the search box
• Enable/Disable SharePoint Online List Comments using PnP PowerShell

It’s possible to create custom forms for SharePoint lists/libraries using Power Apps, directly from the list command bar by using the option Integrate/Power Apps/Customize the form:

This allows you to create a custom form using all features that a Canvas app offers. While you can keep all the out-of-the-box SharePoint list view native features, such as sorting, filtering, grouping & using JSON formatting, you will be able to build an entire new form by using the Canvas apps studio.

Variables and form behaviour

It’s great to be able to customize the form only and quickly build more advanced forms by using Power Fx and Canvas apps features, however it’s important to bear in mind how variables work.

The event Screen.OnVisible, will run only by on the first time you open an item in a list/view, OR if you create multiple screens and navigate to it. This means that when you select another item in the view, the event Screen.OnVisible is not going to be triggered automatically. For a person used to work with Canvas apps this can cause some confusion and maybe lead to a few bugs in the form if the behaviour is not understood when building the form.

Based on this, even though you can use context variables, they might not be that useful if you want to control data related to specific items or form instances open. For example if you have a form with multiple tabs and want to store the selected tab value in a variable, using context variables won’t be much help.

Overcoming the behaviour

Every SharePoint list custom form built with Power Apps has integration events that are triggered when interact with the item and the form is open or closed.

You can find those events and add Power Fx formulas to them in the SharePoint integration object:

There are 5 available events:

• OnNew: triggers when the form is open to create a new item
• OnEdit: triggers when the form is open to edit an existing item
• OnView: triggers when the form is open to view an existing item
• OnSave: triggers when the save button is clicked
• OnCancel: triggers when the cancel button is clicked

You can use global variables in your app, and reset them in those events if needed, so if you load another item from the list, it won’t be getting wrong variable values.

Bear in mind those events are triggered from the Power Apps form only, so if you are using quick edit view, they will not be triggered.

Conclusion

By using the SharePoint integration events we can proper handle variables in a custom form.

References

Customize a form for a SharePoint list or library – Microsoft learn

The post Handling variables in SharePoint custom forms built with Power Apps appeared first on michelcarlo.

Previously I posted about hiding buttons in a SharePoint list using JSON formatting using the command bar customization.

The same customization features can be used to edit the buttons icons and titles, for example, below we have a custom bar that replaced some of the native buttons icons and text.

By adding values to the ‘text‘ and ‘iconName‘ properties we can accomplish this.

For example, if we apply the below JSON snippet as view formatter in a view:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "commandBarProps": {
      "commands": [
        {
          "key": "new",
          "text": "Add a new Event Session",
          "iconName": "Feedback"
        },
        {
          "key": "export",
          "text": "Export this list"       
        },
        {
          "key": "automate",
          "text": "Workflows",
          "iconName" : "WorkFlow"
           
        },
        {
          "key": "integrate",
          "text": "Power Platform",
          "iconName": "rocket"       
        }
      ]
    }
  }

It will replace the native icons/text for the buttons/menus:

• New: Change the icon and change the text to ‘Add a new Event Session’
• Export: Change the text to export this list
• Automate: Change the icon, and change the text to ‘Workflows’
• Integrate: Change the icon, and change the text to ‘Power Platform’

So the command bar will change from:

To:

Finding icons to use

The icons you can use to customize the command bar are the same as Microsoft’s Fluent UI, you can search them and grab the name on this page: Fluent UI Icons

Conclusion

By using JSON formatting we can easily change icons and text for list command bar buttons. Bear in mind the changes affect only the view where you apply them, they need to be manually applied in every view you want them to take effect.

Reference

Command bar customization syntax reference – Microsoft Learn

The post Customize the SharePoint command bar icons and titles with JSON formatting appeared first on michelcarlo.