Fluent Commerce Logo
Docs

Sourcing Profile Drawer

UI Component

Changed on:

1 Oct 2025

Overview

The Sourcing Profile Drawer is a side-panel UI component used to edit sourcing profiles and manage strategies within them. It displays structured form fields for profile attributes, sourcing strategies, and fallback strategies. The drawer opens alongside the main view, allowing users to add or update configuration details without navigating away from the profile details page.

No alt text provided
Plugin NameCore

The standard library of mystique components. 

0000-00-00

v1.0.0

Initial changelog entry.

Alias

fc.sourcing.profile.drawer.button

Detailed technical description

The component supports multiple modes of use:

  • Add Strategy Mode – create a new sourcing or fallback strategy within a profile.
  • Edit Strategy Mode – update or refine an existing sourcing or fallback strategy.
  • Edit Profile Mode – adjust profile-level configuration.

Properties

Name

Type

Required

Default

Description

label

`string`

 Yes

 None

Text displayed on the drawer trigger button.

title

`string`

Yes

 None

Title displayed at the top of the drawer.

action

`addStrategy` | `addFallbackStrategy` | `editStrategy` | `editFallbackStrategy` | `editProfile`

Yes

 None

The mode that defines whether a new strategy is being created, an existing one is modified, or an existing profile is modified.

style

`Primary | Secondary`

No

 `Primary`

Defines the visual type of the drawer button.

filter

`Filter`

No

 None

Used to exclude specific fields from the form rendering.

overrides

`ExtendedFormField`

No

None

Allows field-level customization, including changing labels, default values, or field components. Overrides are optional; default values are used where no override is provided.

confirmModal

`ConfirmModal`

Yes

 None

Defines the confirmation modal shown upon save, including title and description.

ConfirmModal

Name

Type

Required

Default

Description

title

`string`

Yes

 None

The modal's header text. It should clearly state the purpose of the confirmation.

description

`string`

No

 None

Optional body text to prompt for a comment. Can provide contextual instructions.

Filter

Name

Type

Required

Default

Description

type

`include | exclude`

Yes

 None

Mode: display or hide selected fields.

names

`string[]`

Yes

 None

List of filter fields to display/hide.

ExtendedFormField

Name

Type

Required

Default

Description

component

`string`

No

None

`FieldRegistry` alias for an alternate field component that should be used for this field, only for this mutation.

label

`string`

No

None

Set a different label for this field (supports i18n keys).

value

any

No

None

Lock in the value of this field. The field will no longer appear in the form as the provided value will be used instead.

defaultValue

any

No

None

Set the initial value of the field. The field will appear in the form and can be changed by the user.

sortPrefix

`string`

No

None

Set the position of a field in a form.

extensions

key / value (`string`)

No

None

Additional parameters of field.

Configuration example

1{
2    "type": "component",
3    "component": "fc.sourcing.strategy.drawer.button",
4    "props": {
5        "action": "addStrategy",
6        "label": "i18n:fc.sourcingStrategyDrawerButton.addPrimaryStrategy.label",
7        "title": "i18n:fc.sourcingStrategyDrawerButton.newStrategy.title",
8        "filter": {
9            "type": "exclude",
10            "names": [
11                "status",
12                "ref"
13            ]
14        },
15        "overrides": {
16            "name": {
17                "sortPrefix": 1
18            },
19            "description": {
20                "sortPrefix": 2,
21                "component": "textArea"
22            },
23            "network": {
24                "sortPrefix": 3,
25                "component": "fc.field.filterComplex",
26                "extensions": {
27                    "query": "query networks { networks{ edges { node { ref } } } } ",
28                    "variables": {
29                        "networks_first": 100
30                    },
31                    "exclude": [
32                        "createdOn",
33                        "controlGroupRef"
34                    ],
35                    "mode": "single",
36                    "searchItemConfig": {
37                        "component": "fc.card.product",
38                        "props": {
39                            "attributes": [
40                                {
41                                    "value": "{{node.ref}}"
42                                }
43                            ]
44                        }
45                    },
46                    "chipItemConfig": {
47                        "label": "{{node.ref}}"
48                    },
49                    "onChangeValues": {
50                        "value": "node"
51                    }
52                }
53            }
54        },
55        "confirmModal": {
56            "title": "i18n:fc.sourcingStrategyDrawerButton.confirmModal.title",
57            "description": "i18n:fc.sourcingStrategyDrawerButton.confirmModal.description"
58        }
59    }
60}

Version History

2025-10-06

v25.10.6

Initial release

Recommended Placement

This component should be used within the Sourcing Profile context. Supported use cases include:

  • Creating or modifying sourcing strategies
  • Creating or modifying fallback strategies
  • Modifying profile-level configuration

It is not recommended for use outside these scenarios.