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.

Recently I got a query about hiding the New and Upload buttons for a SharePoint library, because there was a need to allow users to browse documents using out-of-the-box SharePoint views in a library while still having permissions to upload files so that they could upload files using an SPFx WebPart or a Canvas App.

This request can easily be achieved using list formatting, by adding customisations to the command bar to hide some buttons as below:

Items to hide/JSON content

Using list formatting, there is an option to hide an out-of-the-box SharePoint button from the command bar in a view (for both lists and libraries).

To hide the New and Upload buttons from a view, you can simply use the below JSON, by mentioning the command key, and the property ‘hide‘ as true:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
    "commandBarProps": {
      "commands": [
        {
          "key": "new",
          "hide": true
        },
        {
          "key": "upload",
          "hide": true
        }
      ]
    }
  }
  

Although I also recommend if that is the purpose, you also hide the ‘Sync’, ‘Add shortcut to OneDrive’ and ‘Pin to quick access’ options, to avoid the users bypassing your custom upload form. You can use the below JSON formatting to do so:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "hide": true
      },
      {
        "key": "upload",
        "hide": true
      },
      {
        "key": "sync",
        "hide": true
      },
      {
        "key": "addShortcut",
        "hide": true
      },
      {
        "key": "pinToQuickAccess",
        "hide": true
      }
    ]
  }
}

See below the difference from a view with all the buttons, and another with hidden buttons:

If you intend to hide the buttons for the whole library, you will need to apply the JSON formatting content in all library views.

Conclusion

By using a simple JSON formatting template, we are able to hide buttons from a view in SharePoint.

Important to note that, those customisations do not take effect on SharePoint mobile apps.

Reference

Command bar customization reference – Microsoft Learn

The post Hiding the New and Upload buttons from a SharePoint document library using JSON list formatting appeared first on michelcarlo.