Thumbnail Grid PCF: User Guidance

Author: Forrest Zhang  •  Version: 0.2.3

The Thumbnail Grid PCF turns a standard Dataverse subgrid into a clean, visual card layout with image, title, subtitle, and badges. It is useful when users need to quickly understand records by picture (files, products, assets, properties, listings, etc.) instead of scanning rows.

Why Use This PCF

• Faster visual scanning than OOB tabular subgrids.
• Supports image URL columns and relative CDN paths.
• Click behavior can open either Dataverse record or external URL.
• Configurable without code from form designer.
• Reusable for any table/view that has suitable columns.

Prerequisites

• Model-driven app in Dataverse.
• Thumbnail Grid control imported in your environment.
• A subgrid view that includes columns you want to display.
• Image URLs accessible by your users (CORS/hotlink policy already handled if needed).

Step 1: Add Control to Subgrid

1. Open the form in modern form designer.
2. Select the target subgrid.
3. In Components, click Add component.
4. Choose Thumbnail Grid.
5. Apply it for Web (and Mobile/Tablet if needed).

[Screenshot Placeholder: Add component panel with Thumbnail Grid selected]

Step 2: Configure Properties

In the control settings panel, each property supports either:

• Bind to table column (recommended when available), or
• Static value (enter logical name manually).

Property	Purpose	Example
imageColumn	Image URL/path column.	hx_publicurl
titleColumn	Primary text on each card.	hx_name
subtitleColumn	Secondary text under title.	createdon
badgeColumns	Comma-separated badge columns.	hx_isprimary,hx_portalvisible
urlColumn	External URL column (used when open mode = URL).	hx_publicurl
assetBaseUrl	Optional base URL for relative paths.	https://assets.example.com
openMode (dropdown)	Card click action.	Record / URL
imageFit (dropdown)	Image rendering style.	Cover / Contain / Original ratio
emptyText	Message when no records are available.	No photos available
maxRows	Optional cap for rendered cards.	6

[Screenshot Placeholder: Full properties panel with sample values]

Step 3: Publish and Validate

1. Save and publish the form/app.
2. Open a record with related rows in the subgrid.
3. Verify images load and cards open as expected.

[Screenshot Placeholder: Final rendered thumbnail cards in app]

Recommended Configurations

Image Gallery

• openMode = Record
• imageFit = Contain
• titleColumn = name
• subtitleColumn = createdon

Listing Cards

• openMode = URL
• urlColumn = public listing URL
• imageFit = Cover
• badgeColumns = status, isprimary, portalvisible

Troubleshooting

• Image unavailable: confirm image URL is reachable in browser and user has access.
• No rows shown: verify the selected view has records and proper relationship filters.
• Wrong card text: check logical names or switch to column binding from settings.
• Click opens wrong target: confirm openMode and urlColumn values.

Release Notes (0.2.3)

• Improved bindable column support through manifest type-groups.
• Image fit now uses dropdown options instead of free text.
• Added built-in user guidance URL property in control settings.

---

Need help? Start with the same guidance link inside control settings: Thumbnail Grid User Guidance