add breadcrumb component for spo entities

[lauribohm]

Breadcrumb component

The component is designed to construct a breadcrumb path, ideally utilizing the OriginalPath, SPSiteURL, SPWebUrl, Title, and FileType properties derived from a SharePoint entity (such as a file, item, folder, document library, etc.). Component validates that neither of OriginalPath, SPSiteURL, SPWebUrl, or Title aren't undefined or null and therefore component is designed to work for SharePoint entities.

The actual breadcrumb is constructed using the Fluent UI breadcrumb.

Breadcrumb path should work fine and look good for:

• files
• pages
• lists
• list items
• sites
• document libraries
• folders

User instructions

• Description: Render a breadcrumb path of a SharePoint entity (file, item, folder, document library etc.).

• Usage:

Get started with:

<pnp-breadcrumb 
    data-path="{{OriginalPath}}"
    data-site-url="{{SPSiteURL}}"
    data-web-url="{{SPWebUrl}}"
    data-entity-title="{{Title}}"
    data-entity-file-type="{{FileType}}"
/>

Use all properties:

<pnp-breadcrumb 
    data-path="{{OriginalPath}}"
    data-site-url="{{SPSiteURL}}"
    data-web-url="{{SPWebUrl}}"
    data-entity-title="{{Title}}"
    data-entity-file-type="{{FileType}}"
    data-include-site-name="false" 
    data-include-entity-name="true"
    data-breadcrumb-items-as-links="true"
    data-max-displayed-items="3"
    data-overflow-index="0"
    data-font-size="12"
/>

Parameter	Description
data-path	Used for creating the breadcrumb path. Component is designed to receive OriginalPath or Path property. Property is required for rendering the breadcrumb path. String
data-site-url	Used for creating the breadcrumb path. Component is designed to receive SPSiteURL property. Property is required for rendering the breadcrumb path. String
data-web-url	Used for creating the breadcrumb path. Component is designed to receive SPWebUrl property. Property is required for rendering the breadcrumb path. String
data-entity-title	Used for creating the breadcrumb path. Component is designed to receive Title property. Property is required for rendering the breadcrumb path. String
data-entity-file-type	Used for creating the breadcrumb path. Component is designed to receive FileType property. Property is required for rendering the breadcrumb path. String
data-include-site-name	If the site name should be included in the breadcrumb items. Optional, default value true. Boolean
data-include-entity-name	If the entity name should be included in the breadcrumb items. If the value is set to false, not only is the entity name excluded from the breadcrumb path, but also the last item in the breadcrumb path is not highlighted in bold. Optional, default value true. Boolean
data-breadcrumb-items-as-links	If the breadcrumb items should be clickable links to the path they represent. Optional, default value true. Boolean
data-max-displayed-items	The maximum number of breadcrumb items to display before coalescing. If not specified, all breadcrumbs will be rendered. Optional, default value 3. Int
data-overflow-index	Index where overflow items will be collapsed. Optional, default value 0. Int
data-font-size	Font size of breadcrumb items. Optional, default value 12. Int

[wobba]

What about /teams? Also some customers have custom domains and government clouds use different domains as well. It's better to use the SPWebUrl as the base when start splitting to avoid dealing with domains.

[lauribohm]

I've now included case /teams in regex check. But per my understanding using domain extensions such as *.mcas.ms, *.mcas-gov.us, or *.mcas-gov.ms does not impact this validation as they are not part of the OriginalPath property.

Also added prop for SPWebUrl and used that while creating the breadcrumb path.

[wobba]

Please address my URL comment as well. Don't use sharepoint.comin the regex, but rather pass in the SPWebUrl value or similar and use that to massage the URL. The domain could e.g. be sharepoint.us or even contoso.com for custom domain customers.

SPWebURL.split('/') and remove the last part gives you up until /sites/sitename/subweb/subweb/subweb as an extreme example. Compare this to e.g OrignalPath and you have the parts being a library/folder.

[lauribohm]

Okey, modified the component and added comments how I think it should work.

[wobba]

You have to update documentation as well as part of the PR with screenshot and how to use the component.

[lauribohm]

You have to update documentation as well as part of the PR with screenshot and how to use the component.

Added instructions how to use the component. Let me know if even more comprehensive documentation is needed.

[wobba]

One more question before I merge. Should we add this component to one of the default templates you think?

[lauribohm]

One more question before I merge. Should we add this component to one of the default templates you think?

Yes, it would make sense to include this component in the details list template, and possibly in the list template as well.

Additionally, I made an extra commit to handle entities with DispForm.aspx?ID=xx in their path, such as images and list items. As a result, the breadcrumb path will display the title + possibly extension/file type of those entities as the last part, instead of DispForm.aspx?ID=xx.

[wobba]

Thank you.. if you acknowledge it looks good for:

• files
• pages
• list items
• sites
• folders
  then we are good (don't have time to build myself right now)

[sonarqubecloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
No data about Duplication

See analysis details on SonarCloud

[lauribohm]

Thank you.. if you acknowledge it looks good for:

• files
• pages
• list items
• sites
• folders
  then we are good (don't have time to build myself right now)

I noticed that the breadcrumb wasn't rendering for lists and document libraries because they don't have a SPWebUrl property. I removed the null check for webUrl from the props validations, and now the siteUrl is used to create the breadcrumb if webUrl is null. This seems to have fixed the issue for lists and document libraries. Have you noticed any other entities where the breadcrumb isn't displaying correctly? I can't think any other entity types from the top of my head currently.

[lauribohm]

@wobba what are the steps forward? Do you need anything else from my side?

[wobba]

Thank you.