@picked/client 0.0.70-next.6 → 0.0.71-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.tsbuildinfo +1 -0
- package/dist/api-CH2FNa6S.cjs +1 -0
- package/dist/api-CgqRvuKL.js +38 -0
- package/dist/cjs/form/index.js +1 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/plugins/dom-observer/index.js +1 -1
- package/dist/cjs/plugins/dynamic-experiences/index.js +1 -1
- package/dist/cjs/server/index.js +1 -1
- package/dist/docs/actions.mdx +38 -18
- package/dist/docs/api/authentication.md +75 -48
- package/dist/docs/api/authorization-and-scopes.md +63 -47
- package/dist/docs/api/error-handling.md +70 -54
- package/dist/docs/api/index.md +41 -22
- package/dist/docs/api/pagination.md +30 -20
- package/dist/docs/api-keys.mdx +11 -6
- package/dist/docs/chrome-extension.md +22 -5
- package/dist/docs/conditions.mdx +32 -19
- package/dist/docs/content/asset-library.mdx +65 -34
- package/dist/docs/content/content-entries.mdx +8 -2
- package/dist/docs/content/layouts.mdx +45 -29
- package/dist/docs/content/pages.mdx +29 -14
- package/dist/docs/content/sections.mdx +19 -8
- package/dist/docs/delivery-api/experience-content.md +10 -5
- package/dist/docs/delivery-api/index.md +19 -12
- package/dist/docs/delivery-api/preview-caching-crawling.md +27 -14
- package/dist/docs/delivery-api/project-config.md +6 -4
- package/dist/docs/experiences.mdx +26 -10
- package/dist/docs/features.mdx +66 -25
- package/dist/docs/fields.mdx +42 -27
- package/dist/docs/flow-builder/building-flows.md +38 -20
- package/dist/docs/flow-builder/condition-builder.md +32 -21
- package/dist/docs/flow-builder/keyboard-shortcuts.md +18 -18
- package/dist/docs/flow-builder/nodes.md +26 -13
- package/dist/docs/flow-builder/overview.mdx +28 -15
- package/dist/docs/gtm-template.md +35 -26
- package/dist/docs/guides/build-a-personalized-page.mdx +36 -18
- package/dist/docs/image-optimisation-service.md +33 -17
- package/dist/docs/index.md +28 -17
- package/dist/docs/mcp.md +46 -38
- package/dist/docs/pickedql/data-sources.md +65 -43
- package/dist/docs/pickedql/dimensions.md +27 -12
- package/dist/docs/pickedql/examples.md +38 -26
- package/dist/docs/pickedql/filtering.md +10 -6
- package/dist/docs/pickedql/index.md +32 -14
- package/dist/docs/pickedql/schema.md +85 -76
- package/dist/docs/pickedql/virtual-functions.md +62 -36
- package/dist/docs/projects.mdx +14 -7
- package/dist/docs/reports.mdx +5 -3
- package/dist/docs/sdk/actions.md +33 -17
- package/dist/docs/sdk/conditions.md +8 -5
- package/dist/docs/sdk/content-security-policy.md +5 -4
- package/dist/docs/sdk/experiences.md +29 -11
- package/dist/docs/sdk/feature-allocation.md +79 -47
- package/dist/docs/sdk/features.md +130 -76
- package/dist/docs/sdk/fields.md +66 -42
- package/dist/docs/sdk/index.md +22 -13
- package/dist/docs/sdk/plugins/create-experience.md +18 -15
- package/dist/docs/sdk/plugins/dynamic-experiences.md +42 -16
- package/dist/docs/sdk/predicates.md +53 -37
- package/dist/docs/sdk/ssr/index.md +25 -8
- package/dist/docs/sdk/ssr/rendering-and-hydration.md +37 -16
- package/dist/docs/sdk/ssr/serialize.md +38 -20
- package/dist/docs/sdk/ssr/slots-and-placements.md +28 -10
- package/dist/docs/sdk/steps.md +100 -55
- package/dist/docs/steps.mdx +20 -11
- package/dist/docs/team-management.md +17 -11
- package/dist/docs/vite-plugin.md +26 -19
- package/dist/docs/workspace-versioning.mdx +14 -8
- package/dist/docs/workspaces.mdx +55 -24
- package/dist/{dom-BwmTHeT7.js → dom-BqcToNL0.js} +1 -3
- package/dist/{dom-CDrHc_j9.cjs → dom-DlLH3FxV.cjs} +1 -1
- package/dist/esm/form/index.js +2 -4
- package/dist/esm/index.js +50 -45
- package/dist/esm/plugins/dom-observer/index.js +1 -1
- package/dist/esm/plugins/dynamic-experiences/index.js +2 -2
- package/dist/esm/preview/index.js +1 -1
- package/dist/esm/server/index.js +12 -10
- package/dist/{experience-instance-DOJShRk5.js → experience-instance-DGk11d8a.js} +3 -3
- package/dist/experience-instance-Dej3P1sE.cjs +1 -0
- package/dist/{plugin-BxMR7fOV.js → plugin-D2UqFikQ.js} +2 -2
- package/dist/plugin-DCW-tnjO.cjs +1 -0
- package/dist/{preview-channel-DW9J8t4B.js → preview-channel-CSr96XAo.js} +1 -1
- package/dist/{protocol-DSqOlW2r.js → protocol-C5KkkiZc.js} +1 -1
- package/dist/types/client.d.ts +7 -6
- package/dist/types/entities/action/action.d.ts +5 -4
- package/dist/types/entities/action/action.d.ts.map +1 -1
- package/dist/types/entities/component/component.d.ts +6 -5
- package/dist/types/entities/component/component.d.ts.map +1 -1
- package/dist/types/entities/condition/condition.d.ts +5 -5
- package/dist/types/entities/content/content.d.ts +4 -3
- package/dist/types/entities/experience/experience.d.ts +11 -10
- package/dist/types/entities/experience/experience.d.ts.map +1 -1
- package/dist/types/entities/experience-instance/experience-instance.d.ts +10 -9
- package/dist/types/entities/feature/feature.d.ts +3 -2
- package/dist/types/entities/feature/feature.d.ts.map +1 -1
- package/dist/types/entities/field/field.d.ts +7 -6
- package/dist/types/entities/framework/framework.d.ts +7 -6
- package/dist/types/entities/framework/framework.d.ts.map +1 -1
- package/dist/types/entities/history/history.d.ts +6 -6
- package/dist/types/entities/plugin/plugin.d.ts +3 -2
- package/dist/types/entities/plugin/plugin.d.ts.map +1 -1
- package/dist/types/entities/predicate/predicate.d.ts +4 -3
- package/dist/types/entities/predicate/predicate.d.ts.map +1 -1
- package/dist/types/entities/response/response-validation.d.ts +3 -2
- package/dist/types/entities/response/response.d.ts +12 -11
- package/dist/types/entities/session/session.d.ts +2 -1
- package/dist/types/entities/step/step.d.ts +6 -5
- package/dist/types/exports.d.ts +2 -1
- package/dist/types/exports.d.ts.map +1 -1
- package/dist/types/form/build-responses.d.ts +2 -1
- package/dist/types/form/create-field-evaluator.d.ts +4 -3
- package/dist/types/form/create-field-validation.d.ts +5 -4
- package/dist/types/form/create-form.d.ts +7 -6
- package/dist/types/form/create-submit-pipeline.d.ts +7 -6
- package/dist/types/form/get-step-fields.d.ts +3 -2
- package/dist/types/lifecycle/condition-selection.d.ts +14 -4
- package/dist/types/lifecycle/lifecycle.d.ts +4 -3
- package/dist/types/lifecycle/rules-logic.d.ts +4 -3
- package/dist/types/lifecycle/state-snapshot.d.ts +4 -3
- package/dist/types/picked.d.ts +64 -62
- package/dist/types/picked.d.ts.map +1 -1
- package/dist/types/ping.d.ts +1 -1
- package/dist/types/ping.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/create-experience.d.ts +9 -8
- package/dist/types/plugins/create-experience/create-experience.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/plugin.d.ts +3 -2
- package/dist/types/plugins/create-experience/plugin.d.ts.map +1 -1
- package/dist/types/plugins/create-experience/serialization.d.ts.map +1 -1
- package/dist/types/plugins/dom-observer/plugin.d.ts +1 -1
- package/dist/types/plugins/dynamic-experiences/plugin.d.ts +3 -3
- package/dist/types/plugins/dynamic-experiences/types.d.ts +8 -5
- package/dist/types/plugins/experience-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/experience-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/history-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/history-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/responses-browser-storage/plugin.d.ts +1 -1
- package/dist/types/plugins/responses-browser-storage/plugin.d.ts.map +1 -1
- package/dist/types/plugins/responses-indexeddb/plugin.d.ts +1 -1
- package/dist/types/plugins/single-page-app/plugin.d.ts +1 -1
- package/dist/types/plugins/single-page-app/plugin.d.ts.map +1 -1
- package/dist/types/plugins/web-components/plugin.d.ts +2 -1
- package/dist/types/plugins/window-object/plugin.d.ts +2 -2
- package/dist/types/preview-channel.d.ts +5 -1
- package/dist/types/preview-receiver/index.d.ts +18 -1
- package/dist/types/preview-receiver/protocol.d.ts +10 -1
- package/dist/types/server/index.d.ts +3 -3
- package/dist/types/server/serialize.d.ts +2 -2
- package/dist/types/utils/dom.d.ts +2 -1
- package/dist/types/utils/events.d.ts +6 -6
- package/dist/types/utils/events.d.ts.map +1 -1
- package/dist/types/utils/global-obj.d.ts +1 -1
- package/dist/types/utils/global-obj.d.ts.map +1 -1
- package/dist/types/utils/id.d.ts.map +1 -1
- package/dist/types/utils/logger.d.ts +2 -1
- package/dist/types/utils/logger.d.ts.map +1 -1
- package/dist/types/utils/node-tree/get-next-node-from-action.d.ts +2 -1
- package/dist/types/utils/node-tree/get-next-node-from-condition.d.ts +2 -1
- package/dist/types/utils/node-tree/get-next-node.d.ts +1 -1
- package/dist/types/utils/node-tree/get-next-node.d.ts.map +1 -1
- package/dist/types/utils/node-tree/get-origin-node.d.ts +1 -1
- package/dist/types/utils/node-tree/get-origin-node.d.ts.map +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-leaf.d.ts +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-leaf.d.ts.map +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-origin.d.ts +1 -1
- package/dist/types/utils/node-tree/min-max-steps-to-origin.d.ts.map +1 -1
- package/dist/types/utils/node-tree/next-reachable-step-nodes.d.ts +1 -1
- package/dist/types/utils/node-tree/next-reachable-step-nodes.d.ts.map +1 -1
- package/dist/types/utils/nodes.d.ts +1 -1
- package/dist/types/utils/picked-config.d.ts +2 -1
- package/dist/types/utils/rules-logic.d.ts +6 -2
- package/dist/types/utils/storage.d.ts +1 -1
- package/dist/types/utils/storage.d.ts.map +1 -1
- package/package.json +22 -23
- package/dist/api-CoUkIxIr.cjs +0 -1
- package/dist/api-ahdSBQ3Y.js +0 -40
- package/dist/experience-instance-DurC3pE-.cjs +0 -1
- package/dist/plugin-CASdGtTX.cjs +0 -1
package/dist/docs/conditions.mdx
CHANGED
|
@@ -6,7 +6,8 @@ import { Screenshot } from '../../components/Screenshot'
|
|
|
6
6
|
|
|
7
7
|
# Conditions
|
|
8
8
|
|
|
9
|
-
A condition evaluates
|
|
9
|
+
A condition evaluates a rule and splits the flow into two paths. One path is for a
|
|
10
|
+
true result, the other for a false result.
|
|
10
11
|
|
|
11
12
|
<Screenshot
|
|
12
13
|
route="/{orgSlug}/{projectId}/workspaces/{workspaceId}/conditions"
|
|
@@ -18,42 +19,54 @@ A condition evaluates logic and branches the flow into two paths — one for whe
|
|
|
18
19
|
1. Open your project.
|
|
19
20
|
2. Click **Conditions** in the sidebar.
|
|
20
21
|
3. Click **New Condition**.
|
|
21
|
-
4. Enter a name and key.
|
|
22
|
+
4. Enter a name and a key.
|
|
22
23
|
5. Click **Create**.
|
|
23
24
|
|
|
24
|
-
##
|
|
25
|
+
## Set up a condition
|
|
25
26
|
|
|
26
|
-
**Name**: The
|
|
27
|
+
**Name**: The name that the dashboard shows. Your visitors do not see it.
|
|
27
28
|
|
|
28
|
-
**Key**: The
|
|
29
|
+
**Key**: The identifier for your application. You set it once and you cannot change
|
|
30
|
+
it. Your visitors do not see it.
|
|
29
31
|
|
|
30
|
-
## Define
|
|
32
|
+
## Define the rule
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
Choose a condition node in the flow builder to open its inspector. The **Logic**
|
|
35
|
+
section holds a visual [condition builder](/flow-builder/condition-builder).
|
|
33
36
|
|
|
34
|
-
The condition builder lets you
|
|
37
|
+
The condition builder lets you write a rule with AND groups and OR groups. Each rule
|
|
38
|
+
compares a data source against an operator and a value.
|
|
35
39
|
|
|
36
|
-
###
|
|
40
|
+
### Data sources
|
|
37
41
|
|
|
38
|
-
**Responses** — values visitors
|
|
42
|
+
**Responses** — the values that your visitors send through form fields. An example is
|
|
43
|
+
a check of whether a visitor entered one email domain, or chose one option.
|
|
39
44
|
|
|
40
|
-
**Actions** —
|
|
45
|
+
**Actions** — the actions that ran during the flow.
|
|
41
46
|
|
|
42
|
-
**Feature flags** — the state of feature
|
|
47
|
+
**Feature flags** — the state of each feature flag in your project. Branch on whether
|
|
48
|
+
Picked allocates a visitor to a flag.
|
|
43
49
|
|
|
44
|
-
**Location** —
|
|
50
|
+
**Location** — the parts of the current page URL of the visitor. These are the
|
|
51
|
+
pathname, the search parameters, the hostname, and the hash. An example is content
|
|
52
|
+
that changes with the page that the visitor is on.
|
|
45
53
|
|
|
46
54
|
### Example
|
|
47
55
|
|
|
48
|
-
To branch
|
|
56
|
+
To take a branch on the country that a visitor chooses:
|
|
49
57
|
|
|
50
58
|
1. Add a rule: **Responses → country** equals `US`.
|
|
51
|
-
2. The green
|
|
59
|
+
2. The green path, for a true result, handles a visitor in the US. The red path, for
|
|
60
|
+
a false result, handles every other visitor.
|
|
52
61
|
|
|
53
|
-
To
|
|
62
|
+
To join more than one rule, create an AND group or an OR group and add the rules
|
|
63
|
+
inside it.
|
|
54
64
|
|
|
55
|
-
##
|
|
65
|
+
## Branches
|
|
56
66
|
|
|
57
|
-
In the flow builder, condition
|
|
67
|
+
In the flow builder, a condition node has two output handles. The green handle, for a
|
|
68
|
+
true result, leads to the path for a match. The red handle, for a false result, leads
|
|
69
|
+
to the other path.
|
|
58
70
|
|
|
59
|
-
You can chain conditions. Connect the output of one condition to the input of another
|
|
71
|
+
You can chain conditions. Connect the output of one condition to the input of another
|
|
72
|
+
to build a decision tree.
|
|
@@ -6,88 +6,119 @@ import { Screenshot } from '../../../components/Screenshot'
|
|
|
6
6
|
|
|
7
7
|
# Asset Library
|
|
8
8
|
|
|
9
|
-
The Asset Library
|
|
9
|
+
The Asset Library holds the files that your content points at. These are images,
|
|
10
|
+
video, documents, and HTML.
|
|
10
11
|
|
|
11
12
|
<Screenshot
|
|
12
13
|
route="/{orgSlug}/{projectId}/assets"
|
|
13
14
|
alt="The asset library on the Picked dashboard"
|
|
14
15
|
/>
|
|
15
16
|
|
|
16
|
-
## Upload and
|
|
17
|
+
## Upload and control your assets
|
|
17
18
|
|
|
18
|
-
The Asset Library is a project-level store. Upload a file, then
|
|
19
|
+
The Asset Library is a project-level store. Upload a file, then point at it from any
|
|
20
|
+
Content Entry in the project.
|
|
19
21
|
|
|
20
|
-
- **Size limit:** 50 MB
|
|
21
|
-
- **Allowed types:**
|
|
22
|
+
- **Size limit:** 50 MB for each file.
|
|
23
|
+
- **Allowed types:** an image in PNG, JPEG, WebP, AVIF, GIF, or SVG. A video in MP4
|
|
24
|
+
or WebM. A common document format. HTML, as `text/html`.
|
|
22
25
|
|
|
23
|
-
|
|
26
|
+
Picked rejects a file of another type. It also rejects a file above the size limit.
|
|
24
27
|
|
|
25
28
|
## Reference an asset from a field
|
|
26
29
|
|
|
27
|
-
Two field types point at library
|
|
30
|
+
Two field types point at an item in the library:
|
|
28
31
|
|
|
29
|
-
- An **Asset** field
|
|
30
|
-
- An **HTML asset** field
|
|
32
|
+
- An **Asset** field points at an image, a video, or a document.
|
|
33
|
+
- An **HTML asset** field takes a `.html` file from your library.
|
|
31
34
|
|
|
32
|
-
Add the field to a [layout](/content/layouts)
|
|
35
|
+
Add the field to a [layout](/content/layouts). Then choose an item from the library
|
|
36
|
+
when you fill in the [Content Entry](/content/content-entries).
|
|
33
37
|
|
|
34
38
|
## Pick an asset
|
|
35
39
|
|
|
36
|
-
Every Asset field opens the same picker
|
|
40
|
+
Every Asset field opens the same picker. Click **Choose file** to open it. On a field
|
|
41
|
+
with a value already, click **Replace**. The modal has two tabs: **Library**, where
|
|
42
|
+
you browse the assets that are there, and **Upload**, where you add a new file.
|
|
37
43
|
|
|
38
44
|
<Screenshot
|
|
39
45
|
route="/{orgSlug}/{projectId}/design-systems/new"
|
|
40
46
|
wait='button:has-text("Upload file")'
|
|
41
47
|
click='button:has-text("Upload file")'
|
|
42
48
|
selector="[role=dialog]"
|
|
43
|
-
alt="The asset picker modal on the Picked dashboard,
|
|
49
|
+
alt="The asset picker modal on the Picked dashboard, with the Library tab, its search box, its type filter, and its Sort by menu"
|
|
44
50
|
renderWidth={1072}
|
|
45
51
|
renderHeight={790}
|
|
46
52
|
/>
|
|
47
53
|
|
|
48
54
|
### Search, filter, and sort
|
|
49
55
|
|
|
50
|
-
The Library tab has three controls
|
|
56
|
+
The Library tab has three controls that make a large asset list smaller. The server
|
|
57
|
+
applies each one across the whole library, and not only across the assets that it
|
|
58
|
+
loaded already:
|
|
51
59
|
|
|
52
|
-
- **Search:**
|
|
53
|
-
- **Type filter:** narrows to
|
|
54
|
-
|
|
60
|
+
- **Search:** narrows the list by file name while you type.
|
|
61
|
+
- **Type filter:** narrows the list to one media type. The choices are All types,
|
|
62
|
+
Images, Video, Audio, Documents, and Archive files.
|
|
63
|
+
- **Sort by:** orders the list by the Name or by the Date uploaded, each one
|
|
64
|
+
ascending or descending.
|
|
55
65
|
|
|
56
66
|
:::note
|
|
57
|
-
|
|
67
|
+
The results come one page at a time. Click **Load more** at the bottom of the list to
|
|
68
|
+
read the next page.
|
|
58
69
|
:::
|
|
59
70
|
|
|
60
|
-
###
|
|
71
|
+
### Choose one asset or several
|
|
61
72
|
|
|
62
|
-
The picker
|
|
73
|
+
The picker changes with the number of assets that the field takes:
|
|
63
74
|
|
|
64
|
-
- A field that holds
|
|
65
|
-
|
|
75
|
+
- A field that holds one asset shows a **radio** indicator next to each row. The
|
|
76
|
+
Asset field of a layout and the guidance file of a design system both do this. A
|
|
77
|
+
new choice replaces the current asset.
|
|
78
|
+
- A place that takes several assets at once shows a **checkbox** indicator. The
|
|
79
|
+
detail panel then also shows a count of what you chose. The Files tab of a
|
|
80
|
+
workbench does this.
|
|
66
81
|
|
|
67
|
-
The detail panel on the right shows the
|
|
82
|
+
The detail panel on the right shows the kind, the dimensions, the size, and the
|
|
83
|
+
upload date of the asset that you chose.
|
|
68
84
|
|
|
69
85
|
### Open an asset in a new tab
|
|
70
86
|
|
|
71
|
-
Each row
|
|
87
|
+
Each row has an **Open in new tab** control, and so does the detail panel of the
|
|
88
|
+
asset that you chose. It links to the full detail page of the asset, and your choice
|
|
89
|
+
in the picker stays as it is.
|
|
72
90
|
|
|
73
91
|
:::tip
|
|
74
|
-
Use this to
|
|
92
|
+
Use this to check an asset again before you choose it. You can see the full-size
|
|
93
|
+
preview and every version that somebody uploaded.
|
|
75
94
|
:::
|
|
76
95
|
|
|
77
96
|
## HTML assets
|
|
78
97
|
|
|
79
|
-
Upload a `.html` file and
|
|
98
|
+
Upload a `.html` file and point at it from an **HTML asset** field. Picked then scans
|
|
99
|
+
the file. The scan is advisory: it helps you, and it never stops you. It
|
|
100
|
+
reports findings about speed, about search rank, and about accessibility, so that you
|
|
101
|
+
can improve the file before you publish it:
|
|
80
102
|
|
|
81
|
-
- **File size:** a warning at 100 KB and a stronger one at 250 KB.
|
|
82
|
-
- **Inline images:** a note when inline base64 image data adds
|
|
83
|
-
- **Image dimensions:**
|
|
84
|
-
|
|
85
|
-
- **
|
|
86
|
-
- **Link
|
|
87
|
-
- **
|
|
103
|
+
- **File size:** a warning at 100 KB, and a stronger one at 250 KB.
|
|
104
|
+
- **Inline images:** a note when inline `base64` image data adds about 50 KB or more.
|
|
105
|
+
- **Image dimensions:** an image with no width and no height. Such an image can move
|
|
106
|
+
the content around it while the page loads.
|
|
107
|
+
- **Lazy load:** an image with no `loading="lazy"` attribute.
|
|
108
|
+
- **Link safety:** an external link with `target="_blank"` and no `rel="noopener"`.
|
|
109
|
+
- **Link search rank:** an external link with no `rel="nofollow"`.
|
|
110
|
+
- **Accessibility:** a pass by `axe-core`. It covers alt text, heading order,
|
|
111
|
+
contrast, and more.
|
|
88
112
|
|
|
89
|
-
Every finding is advisory. You can always upload the file as is.
|
|
113
|
+
Every finding is advisory. You can always upload the file as it is.
|
|
90
114
|
|
|
91
115
|
## How assets are served
|
|
92
116
|
|
|
93
|
-
|
|
117
|
+
Picked serves each asset from a sandboxed storage origin. That origin is separate
|
|
118
|
+
from the trusted origin of your application. HTML therefore comes from its own
|
|
119
|
+
origin, so a document that you upload runs in isolation and cannot reach the page
|
|
120
|
+
that holds it.
|
|
121
|
+
|
|
122
|
+
An [Experience Content](/delivery-api/experience-content) response can hold an HTML
|
|
123
|
+
asset. The response then carries the content of that asset, and the SDK renders it
|
|
124
|
+
with no second request to storage.
|
|
@@ -23,8 +23,14 @@ A [Page](/content/pages) has a single Step, and that Step links to its entry thr
|
|
|
23
23
|
|
|
24
24
|
## Edit entry data
|
|
25
25
|
|
|
26
|
-
The entry editor renders a form
|
|
26
|
+
The entry editor renders a form from the layout schema. There is one input for each
|
|
27
|
+
field, in the order that the schema sets. A repeatable field appears as a sortable
|
|
28
|
+
list. You can add to that list and put it into a new order. A group field holds its
|
|
29
|
+
inputs under one heading.
|
|
27
30
|
|
|
28
31
|
## Validation
|
|
29
32
|
|
|
30
|
-
Invalid data
|
|
33
|
+
Invalid data appears as an error on each field. The error carries a path in the JSON
|
|
34
|
+
style, and it points at the exact place in the entry, for example
|
|
35
|
+
`sections[0].data.title`. Fix every error before you publish, because Picked serves
|
|
36
|
+
valid content only.
|
|
@@ -15,23 +15,31 @@ Layouts are reusable JSON schemas. Page Layouts back standalone Pages; Step Layo
|
|
|
15
15
|
|
|
16
16
|
## What a layout is
|
|
17
17
|
|
|
18
|
-
A layout is a reusable schema
|
|
18
|
+
A layout is a reusable schema. It defines the fields that a piece of content can
|
|
19
|
+
hold. A layout holds no data itself. A [Content Entry](/content/content-entries)
|
|
20
|
+
creates one copy of a layout and fills it in. The dashboard shows both layout kinds
|
|
21
|
+
under **Models**.
|
|
19
22
|
|
|
20
|
-
##
|
|
23
|
+
## A page layout and a step layout
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
Each layout has a fixed category, and the category decides what the layout gives its
|
|
26
|
+
shape to:
|
|
23
27
|
|
|
24
|
-
| Layout |
|
|
28
|
+
| Layout | It gives its shape to | Who renders it |
|
|
25
29
|
| --- | --- | --- |
|
|
26
|
-
| **Page Layout** | A standalone [Page](/content/pages). | The SDK renders the
|
|
27
|
-
| **Step Layout** |
|
|
30
|
+
| **Page Layout** | A standalone [Page](/content/pages). | The SDK renders the entry on your server. |
|
|
31
|
+
| **Step Layout** | One [Step](/steps) inside a Flow. | The Step renders the entry in the browser. |
|
|
28
32
|
|
|
29
33
|
## Create a layout
|
|
30
34
|
|
|
31
|
-
1. Open your workspace
|
|
32
|
-
2. Click **
|
|
33
|
-
3.
|
|
34
|
-
4.
|
|
35
|
+
1. Open your workspace.
|
|
36
|
+
2. Click **Models** in the sidebar.
|
|
37
|
+
3. Click **New Model**.
|
|
38
|
+
4. Choose the category, **Page Layout** or **Step Layout**.
|
|
39
|
+
5. Enter a name and a **Key**. The Key is a unique, stable identifier. Your SDK code
|
|
40
|
+
and your API calls both use it.
|
|
41
|
+
6. Add your fields. See below.
|
|
42
|
+
7. Save.
|
|
35
43
|
|
|
36
44
|
The category is fixed at creation and cannot be changed later.
|
|
37
45
|
|
|
@@ -41,30 +49,38 @@ A layout is built from fields. Each field has a type that decides its editor and
|
|
|
41
49
|
|
|
42
50
|
| Type | Stores | Use it for |
|
|
43
51
|
| --- | --- | --- |
|
|
44
|
-
| **Single-line text** | A short string. |
|
|
45
|
-
| **Multi-line text** | A longer plain string. |
|
|
46
|
-
| **Markdown** | A Markdown string. |
|
|
47
|
-
| **Slug** | A URL-safe string. |
|
|
48
|
-
| **Number** | A numeric value. |
|
|
49
|
-
| **Boolean** | A true
|
|
50
|
-
| **Date** | A date value. |
|
|
51
|
-
| **Color** | A color value. |
|
|
52
|
-
| **JSON** |
|
|
53
|
-
| **Group** |
|
|
54
|
-
| **Section** |
|
|
55
|
-
| **Asset** | A
|
|
56
|
-
| **HTML asset** | A
|
|
52
|
+
| **Single-line text** | A short string. | A title, a label, or a short headline. |
|
|
53
|
+
| **Multi-line text** | A longer plain string. | A description, or a paragraph with no format marks. |
|
|
54
|
+
| **Markdown** | A Markdown string. | Body copy with format marks. |
|
|
55
|
+
| **Slug** | A URL-safe string. | A part of a path, or an identifier. |
|
|
56
|
+
| **Number** | A numeric value. | A price, a count, or a rating. |
|
|
57
|
+
| **Boolean** | A true or false value. | A toggle or a flag. |
|
|
58
|
+
| **Date** | A date value. | A publish date or a deadline. |
|
|
59
|
+
| **Color** | A color value. | A theme accent or a swatch. |
|
|
60
|
+
| **JSON** | Any JSON value. | Structured data with no editor of its own. |
|
|
61
|
+
| **Group** | An object of fields inside the layout. | A set of related fields, held together. |
|
|
62
|
+
| **Section** | A [Section](/content/sections) schema inside the layout. | A shared schema fragment that you reuse. |
|
|
63
|
+
| **Asset** | A link to an [Asset Library](/content/asset-library) item. | An image, a video, or a document. |
|
|
64
|
+
| **HTML asset** | A link to a `.html` file in your library. | HTML that you wrote before, held inside the content. |
|
|
57
65
|
|
|
58
66
|
## Repeatable and grouped fields
|
|
59
67
|
|
|
60
|
-
|
|
68
|
+
You can make any field **repeatable**. It then renders as a sortable list of values,
|
|
69
|
+
and not as one value. Use it for a gallery, for a list of features, or for any
|
|
70
|
+
collection.
|
|
61
71
|
|
|
62
|
-
A **Group** field
|
|
72
|
+
A **Group** field holds a set of fields under one key, and it gives a structured
|
|
73
|
+
object. Make a group repeatable to describe a list of objects, such as a list of
|
|
74
|
+
feature cards.
|
|
63
75
|
|
|
64
|
-
##
|
|
76
|
+
## Build with sections
|
|
65
77
|
|
|
66
|
-
A **Section** field
|
|
78
|
+
A **Section** field holds a reusable [Section](/content/sections) schema inside the
|
|
79
|
+
layout. Define a common structure one time as a Section, such as a hero or a list of
|
|
80
|
+
features. Then point at it from any Page Layout or Step Layout.
|
|
67
81
|
|
|
68
|
-
##
|
|
82
|
+
## Change a schema
|
|
69
83
|
|
|
70
|
-
|
|
84
|
+
A change to the schema of a layout can make a Content Entry invalid. After such
|
|
85
|
+
a change, check each entry that uses the layout again. Fix every field error before
|
|
86
|
+
you publish.
|
|
@@ -13,16 +13,19 @@ A Page is a standalone, server-rendered experience backed by CMS content, built
|
|
|
13
13
|
alt="The experiences list, where Pages and Flows are created on the Picked dashboard"
|
|
14
14
|
/>
|
|
15
15
|
|
|
16
|
-
## Pages
|
|
16
|
+
## Pages and flows
|
|
17
17
|
|
|
18
|
-
Picked has two kinds
|
|
18
|
+
Picked has two experience kinds:
|
|
19
19
|
|
|
20
20
|
| Experience | What it is | Use it for |
|
|
21
21
|
| --- | --- | --- |
|
|
22
|
-
| **Page** | A standalone experience
|
|
23
|
-
| **Flow** |
|
|
22
|
+
| **Page** | A standalone experience that your server renders from a Content Entry. | A landing page or a campaign page where the search rank matters, and any content that a crawler must see. |
|
|
23
|
+
| **Flow** | An interactive experience of more than one step, which the browser renders. | A quiz, a survey, a product finder, and onboarding of more than one step. |
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
Choose a **Page** when the content must be in the HTML from your server, for a search
|
|
26
|
+
engine and for a social preview. Choose a **Flow** when the value is in the
|
|
27
|
+
interaction, and a browser render is acceptable. See
|
|
28
|
+
[Experiences](/experiences) for the wider picture.
|
|
26
29
|
|
|
27
30
|
## How a page fits together
|
|
28
31
|
|
|
@@ -42,26 +45,38 @@ Author (dashboard) -> Publish -> Delivery API (config + content)
|
|
|
42
45
|
|
|
43
46
|
## Create a page
|
|
44
47
|
|
|
45
|
-
1. Open your project
|
|
46
|
-
2.
|
|
47
|
-
3. Click **
|
|
48
|
-
4.
|
|
49
|
-
5.
|
|
48
|
+
1. Open your project.
|
|
49
|
+
2. Choose a workspace.
|
|
50
|
+
3. Click **Experiences** in the sidebar.
|
|
51
|
+
4. Click **New Experience**.
|
|
52
|
+
5. Choose the **Page** type.
|
|
53
|
+
6. Choose a **Page Layout**. The layout sets which fields the page holds.
|
|
54
|
+
7. Click **Create**.
|
|
50
55
|
|
|
51
56
|
A Content Entry is created and linked to the page on its first save, so the page always has somewhere to store its data.
|
|
52
57
|
|
|
53
58
|
## Edit page content
|
|
54
59
|
|
|
55
|
-
The Page editor has
|
|
60
|
+
The Page editor has two tabs. The **Properties** tab holds the content of the page.
|
|
61
|
+
The **Settings** tab holds its name, its condition, and its layout. Fill in the
|
|
62
|
+
fields on the **Properties** tab. The inspector on the right edits the field that you
|
|
63
|
+
choose, and the preview panel shows the page while it fills in.
|
|
56
64
|
|
|
57
65
|
## Change or remove the layout
|
|
58
66
|
|
|
59
|
-
Use the change-layout control on the **Settings** tab to
|
|
67
|
+
Use the change-layout control on the **Settings** tab to move the page to another
|
|
68
|
+
Page Layout. When you unlink a layout, Picked separates the Content Entry from the
|
|
69
|
+
page. It deletes no entry, but the page then has no content to render until you
|
|
70
|
+
attach a layout again.
|
|
60
71
|
|
|
61
72
|
## Validate and publish
|
|
62
73
|
|
|
63
|
-
|
|
74
|
+
An invalid field shows an error next to it while you edit, so that you can correct it
|
|
75
|
+
before you publish. When the page is valid, publish the workspace to make it live.
|
|
76
|
+
That makes the version that the Delivery API serves to an anonymous reader.
|
|
64
77
|
|
|
65
78
|
## Render a page
|
|
66
79
|
|
|
67
|
-
|
|
80
|
+
The SDK renders a published Page on your server. See the
|
|
81
|
+
[Build a Personalized Page](/guides/build-a-personalized-page) guide for the full
|
|
82
|
+
steps, and [Server-Side Rendering](/sdk/ssr) for the SDK reference.
|
|
@@ -15,19 +15,30 @@ Sections are reusable schema fragments you embed inside layouts, so common struc
|
|
|
15
15
|
|
|
16
16
|
## What a section is
|
|
17
17
|
|
|
18
|
-
A Section is a reusable fragment
|
|
18
|
+
A Section is a reusable schema fragment with its own **Key**. A
|
|
19
|
+
[layout](/content/layouts) gives its shape to a whole Page or Step. A Section is a
|
|
20
|
+
part that you put into one or more layouts. Define the shape one time, then reuse it
|
|
21
|
+
everywhere.
|
|
19
22
|
|
|
20
23
|
## Create a section
|
|
21
24
|
|
|
22
|
-
1. Open your workspace
|
|
23
|
-
2. Click **
|
|
24
|
-
3.
|
|
25
|
-
4.
|
|
25
|
+
1. Open your workspace.
|
|
26
|
+
2. Click **Sections** in the sidebar.
|
|
27
|
+
3. Click **New Section**.
|
|
28
|
+
4. Enter a name and a **Key**. The Key is a unique, stable identifier. Your SDK code
|
|
29
|
+
and your API calls both use it.
|
|
30
|
+
5. Add your fields.
|
|
31
|
+
6. Save.
|
|
26
32
|
|
|
27
33
|
## Use a section in a layout
|
|
28
34
|
|
|
29
|
-
Add a **Section** field to a Page or Step Layout
|
|
35
|
+
Add a **Section** field to a Page Layout or a Step Layout. Point that field at the
|
|
36
|
+
Section that you want. The layout then carries the fields of the Section at every
|
|
37
|
+
place where that field appears. A Content Entry from the layout fills in the fields
|
|
38
|
+
of the Section in the same way as every other field.
|
|
30
39
|
|
|
31
|
-
##
|
|
40
|
+
## Change a section
|
|
32
41
|
|
|
33
|
-
|
|
42
|
+
An edit to a Section does not migrate the entries that use it. After you change a
|
|
43
|
+
Section, check each affected [Content Entry](/content/content-entries) again. Correct
|
|
44
|
+
every field error before you publish.
|
|
@@ -16,7 +16,7 @@ GET /api/v1/projects/:projectId/experiences/:id/content
|
|
|
16
16
|
| --- | --- | --- |
|
|
17
17
|
| `projectId` | path | The project the experience belongs to. |
|
|
18
18
|
| `id` | path | The experience to fetch content for. |
|
|
19
|
-
| `preview_token` | query | Optional.
|
|
19
|
+
| `preview_token` | query | Optional. With it, the endpoint returns preview content, which is unpublished. |
|
|
20
20
|
|
|
21
21
|
## Response
|
|
22
22
|
|
|
@@ -40,11 +40,14 @@ GET /api/v1/projects/:projectId/experiences/:id/content
|
|
|
40
40
|
| `versionId` | `string \| null` | The published version id, or `null` on preview. |
|
|
41
41
|
| `content[].id` | `string` | The Content Entry id. |
|
|
42
42
|
| `content[].contentModelKey` | `string \| null` | The layout's Key, or `null` when it cannot be resolved. |
|
|
43
|
-
| `content[].data` | `object` | The entry data
|
|
43
|
+
| `content[].data` | `object` | The entry data. It matches the layout schema. |
|
|
44
44
|
|
|
45
|
-
## HTML asset
|
|
45
|
+
## An HTML asset comes back in the response
|
|
46
46
|
|
|
47
|
-
|
|
47
|
+
A layout can have an [HTML asset](/content/asset-library) field. The value of that
|
|
48
|
+
field arrives inside the response. The endpoint changes the reference to
|
|
49
|
+
`{ id, content }`. There, `content` holds the HTML that you uploaded, as a string. It
|
|
50
|
+
is `null` when the endpoint cannot resolve it:
|
|
48
51
|
|
|
49
52
|
```json
|
|
50
53
|
{
|
|
@@ -82,4 +85,6 @@ curl https://api.picked.app/api/v1/projects/proj_123/experiences/exp_123/content
|
|
|
82
85
|
}
|
|
83
86
|
```
|
|
84
87
|
|
|
85
|
-
See [Project Config](/delivery-api/project-config) for the endpoint that links
|
|
88
|
+
See [Project Config](/delivery-api/project-config) for the endpoint that links a step
|
|
89
|
+
to an entry. See [Asset Library](/content/asset-library) for an HTML asset. See
|
|
90
|
+
[Server Snapshot](/sdk/ssr/serialize) for how the SDK reads this content.
|
|
@@ -4,20 +4,23 @@ layout: docs
|
|
|
4
4
|
|
|
5
5
|
# Delivery API
|
|
6
6
|
|
|
7
|
-
The Delivery API is a public
|
|
7
|
+
The Delivery API is a public REST API. It is read-only, and it serves the published
|
|
8
|
+
options of your project together with your page content. It is separate from the
|
|
9
|
+
GraphQL management API.
|
|
8
10
|
|
|
9
|
-
## Delivery API
|
|
11
|
+
## The Delivery API and the management API
|
|
10
12
|
|
|
11
|
-
Picked has two HTTP APIs. Use the one that fits
|
|
13
|
+
Picked has two HTTP APIs. Use the one that fits your work:
|
|
12
14
|
|
|
13
15
|
| | Delivery API | Management API |
|
|
14
16
|
| --- | --- | --- |
|
|
15
17
|
| Style | REST | GraphQL |
|
|
16
18
|
| Access | Public, anonymous | Authenticated |
|
|
17
19
|
| Operations | Read-only | Read and write |
|
|
18
|
-
| Use
|
|
20
|
+
| Use it to | Serve published options and content to your application | Control your projects, experiences, and content |
|
|
19
21
|
|
|
20
|
-
The
|
|
22
|
+
The [API Reference](/api) covers the management API. This section covers the Delivery
|
|
23
|
+
API.
|
|
21
24
|
|
|
22
25
|
## Base URL and versioning
|
|
23
26
|
|
|
@@ -27,20 +30,24 @@ All Delivery API routes are versioned under `/api/v1`:
|
|
|
27
30
|
https://api.picked.app/api/v1
|
|
28
31
|
```
|
|
29
32
|
|
|
30
|
-
## Published
|
|
33
|
+
## Published content and preview content
|
|
31
34
|
|
|
32
35
|
Each endpoint serves two surfaces:
|
|
33
36
|
|
|
34
|
-
- **Published** content is anonymous.
|
|
35
|
-
|
|
37
|
+
- **Published** content is anonymous. Anybody can read your published options and
|
|
38
|
+
your published content.
|
|
39
|
+
- **Preview** content needs a `preview_token` query parameter. With it you can render
|
|
40
|
+
an unpublished draft before you make it live.
|
|
36
41
|
|
|
37
|
-
|
|
42
|
+
The management API holds the preview token of a workspace in the `previewToken`
|
|
43
|
+
field. The preview action in the dashboard also makes one for you.
|
|
38
44
|
|
|
39
45
|
## Endpoints
|
|
40
46
|
|
|
41
47
|
| Endpoint | Description |
|
|
42
48
|
| --- | --- |
|
|
43
|
-
| [Project Config](/delivery-api/project-config) | `GET /api/v1/projects/:projectId` returns the published project
|
|
44
|
-
| [Experience Content](/delivery-api/experience-content) | `GET /api/v1/projects/:projectId/experiences/:id/content` returns the Content Entries
|
|
49
|
+
| [Project Config](/delivery-api/project-config) | `GET /api/v1/projects/:projectId` returns the published options of the project, with the content link of each step. |
|
|
50
|
+
| [Experience Content](/delivery-api/experience-content) | `GET /api/v1/projects/:projectId/experiences/:id/content` returns the Content Entries of an experience. |
|
|
45
51
|
|
|
46
|
-
|
|
52
|
+
Both endpoints share some behaviour. See
|
|
53
|
+
[Preview, cache, and crawlers](/delivery-api/preview-caching-crawling).
|