Conigma Connect

Link Button

Discriminator: linkButton
Fluent UI Blazor Component: FluentButton

Description

The LinkButton component renders a button that navigates to a URL when clicked. The URL can include dynamic placeholders resolved from bound component data, and optional query string parameters extracted via JSON Path. It supports opening links in a new tab or the current tab.

Properties

Property

Type

Required

Default

Description

component

string

✅ Yes

"linkButton"

Type discriminator

style

string

No

null

Inline CSS style

id

string

No

null

Component identifier

text

string

No

"Open Link"

Button label text

linkTemplate

string

No

""

URL template with optional {placeholder} tokens resolved from combined data

queryPath

JsonPath

No

null

JSON Path expression to extract an object from combined data, whose properties are appended as query string parameters

openInNewTab

bool

No

true

Whether the link opens in a new browser tab

data

JsonObject

No

{}

Static JSON data merged into the combined data object

bindings

ButtonDataBinding[]

No

[]

Data bindings to collect data from other components (see below)

validatesComponents

string[]

No

[]

Component IDs to validate before navigating

ButtonDataBinding

Defines how data is collected from another component and merged into the combined data.

Property

Type

Required

Default

Description

componentId

string

✅ Yes

—

ID of the source component to read data from

sourcePath

JsonPath

No

null

JSON Path to extract a specific value from the source component's data

targetPath

JsonPath

No

null

JSON Path specifying where to place the value in the combined data. When null, the value is placed at the root using componentId as the key

URL Template Placeholders

The linkTemplate supports {placeholder} tokens that are resolved at click time from the combined data:

  • Simple property: {propertyName} — Looks up propertyName in the combined data.

  • JSON Path: {$.path.to.value} — Evaluates a JSON Path expression against the combined data.

Placeholder values are URL-encoded automatically.

Example

Given combined data { "orderId": "12345", "type": "invoice" } and template:

Rendering...

The resolved URL would be: >

Query String Parameters

When queryPath is set, the JSON Path is evaluated against the combined data. If the result is a JSON object, its properties are appended to the URL as query string parameters.

Example

Given combined data { "filters": { "status": "active", "page": 1 } } and queryPath: "$.filters", the query string ?status=active&page=1 is appended to the URL.

Validation

Before navigating, the button validates all components listed in validatesComponents. If any validation errors are found, a warning toast is shown and navigation is cancelled.

JSON Example

Simple Link

Rendering...

Link with Data Binding and Placeholders

Rendering...

See Also