| name | document-browser |
| description | Create or update a professional live-linked document browser dashboard for a SharePoint document library, using real metadata fields, a clean navy-and-yellow design system, visible refresh, reliable SharePoint Open/Download links, and a 3-card desktop layout.
Use when the user says:
- "create a document browser"
- "make a live dashboard for this document library"
- "build a document library dashboard"
- "use the document browser skill on this library"
- "make sure the dashboard is live linked" |
Document Browser
When to use
Use this skill when the user wants a professional document browser dashboard for a SharePoint document library or folder. The dashboard must browse documents using real metadata, search, filters, cards, read-only Open links, Download links, and live-linked data whenever supported.
Inputs
- Target SharePoint document library URL, list ID, or selected/current library.
- Optional folder path inside the library.
- Optional approval rule, default: show approved documents only when content approval is enabled.
- Optional dashboard file name and destination folder.
- Optional requested filters.
Steps
-
Resolve and inspect
- Resolve the target library ID and web URL.
- Retrieve the full schema and use internal field names only.
- Identify approval status, Document Title, name/path fields, description/abstract, metadata filters, Document Owner, contacts, author/editor, created/modified dates.
-
Title and owner rules
- Prefer Document Title for card titles. Match
Document Title, documentTitle, and Document_x0020_Title.
- Fall back to
Title, then file name.
- Show Document Owner name directly below the card title. Match
documentOwner / Document Owner; fall back to Author only if no owner exists.
-
Live-linked build
- Use LiveData/list binding for supported library roots or list sources.
- Include
ka-livedata-manifest and runtime code that reads window.__LD_RESULTS__.
- Include a visible Refresh live data button wired to
refresh().
- Don't claim live-linked unless newly added/updated source documents appear after refresh without regenerating HTML.
-
Design requirements
Use this exact visual system:
Color palette
- Navy:
#03274A
- Blue:
#164C80
- Yellow accent:
#FFD633
- Pale blue:
#CAD8E5
- Line / border:
#D7E2EC
- Sand background:
#F7F5F3
- Text:
#161616
- Muted text:
#5A5A57
Typography
- Primary font stack: Aptos, "Segoe UI", Arial, sans-serif
Hero header
- Large rounded navy (or navy-to-blue gradient) hero banner
- Soft yellow translucent circle accent in the upper-right
- Short uppercase kicker in yellow with letter-spacing
- Large white title
- Pale lead text under the title
- Optional simple flat-vector illustration on the right side of the hero
Layout & cards
- Exactly 3 document cards per desktop row (
grid-template-columns: repeat(3, minmax(0, 1fr))), collapsing to 2 then 1 on smaller screens
- White cards with subtle border (
#D7E2EC), soft shadow, and large border-radius (~20–22px)
- Left yellow accent bar on the card header area
- Document title in navy, bold
- Document Owner / contacts shown directly under the title in muted text
- Abstract preview with hover/focus popup
- Metadata shown as small rounded pills
- Pill-shaped action buttons (primary = solid blue, secondary = outlined)
Overall feel
- Clean, modern, professional knowledge-browser aesthetic
- Generous white space, soft shadows, clear hierarchy
- Card-first design (avoid dense tables)
-
Dashboard features
- Search across Document Title/title, filename, abstract/description, metadata, Document Owner, contacts, author/editor.
- Filter using real fields. Prefer Practice, Service Area, Industry Sectors, Market, Regions, Lead Office, Document Type, Year created when present.
- Cards include title, Document Owner below title, abstract preview with hover/focus popup, metadata pills, dates, Open and Download actions.
-
Open and Download link rules — critical
- In SharePoint HTML preview the dashboard runs inside
about:srcdoc; do not use location.origin for Open or Download because it may resolve to null.
- Define a constant site URL from the resolved web URL, e.g.
var SITE='https://tenant.sharepoint.com/sites/site';.
- Do not render
href="#". If no path is available, render a disabled text control instead.
- Build links from a decoded server-relative SharePoint path.
- Resolve path in this order:
FileRef / File_x0020_Ref / ServerRelativeUrl / Path; then EncodedAbsUrl parsed to pathname; then FileDirRef + '/' + FileLeafRef.
- Use
safeDecode() repeatedly before encoding route parameters so Documents%2520Browser becomes Documents Browser, then re-encodes only once.
- Verified working Open pattern:
SITE + '/_layouts/15/Doc.aspx?sourcedoc=' + encodeURIComponent(serverRelativePath) + '&file=' + encodeURIComponent(fileName) + '&action=embedview&mobileredirect=true'.
- The
serverRelativePath must be decoded first, then encoded exactly once in the sourcedoc route parameter.
- Do not replace this with the direct file URL
?web=1&action=embedview unless it has been manually tested in the target dashboard after saving.
- Do not use
download.aspx?SourceUrl=...&transform=pdf for Open; it can fail with File Not Found when spaces are double-encoded.
- Download:
SITE + '/_layouts/15/download.aspx?SourceUrl=' + encodeURIComponent(serverRelativePath).
- Add
target="_blank", rel="noopener", and data-interception="off".
- Never use PDF transform links for Open; never append
download=1; validate no %2520, no null/sites, no href="#", and no absolute URL inside SourceUrl.
-
Validate before saving
- Confirm live manifest/source exists.
- Confirm visible refresh control exists and is wired.
- Confirm 3-column desktop grid exists.
- Confirm Document Title is first title source and Document Owner appears below title.
- Confirm the navy / yellow / sand design system and hero structure are present.
- Confirm Open uses the verified
Doc.aspx?sourcedoc=...&file=...&action=embedview&mobileredirect=true pattern; confirm Download uses SITE, robust source-path fallback, and neither link renders #, null/sites, PDF transform, direct untested ?web=1&action=embedview, or double-encoded %2520.
-
Save
- Create or update an
.html file in the requested destination.
- Prefer saving HTML dashboards to a Reports library or the location requested by the user unless updating an explicitly selected existing file.
- Provide the file link.
Output format
Respond with:
- Link to the dashboard.
- Whether it is fully live-linked.
- Note that it uses 3 desktop columns, Document Title, Document Owner below title, the navy-and-yellow design system, visible refresh, and robust decoded server-relative Open/Download links.
- Any limitation or workaround.
Honesty
If live binding can't target the requested folder or view, say so and offer a workaround. Don't invent working links or data.
