You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The `authToken`can be found for each project under `Publish > Settings > Settings`.
44
49
45
50
#### **Step 3: Embed the CodelesslyWidget**
@@ -82,15 +87,19 @@ class MyApp extends StatelessWidget {
82
87
}
83
88
```
84
89
85
-
The `CodelesslyWidget` can be used like any other widget and embedded anywhere in your app. It can even be used to render entire pages as the root widget!
90
+
The `CodelesslyWidget` can be used like any other widget and embedded anywhere in your app. It can even be used to
91
+
render entire pages as the root widget!
86
92
87
-
From dynamic forms to constantly changing sales and marketing pages, any design or layout can be streamed to your app via the `CodelesslyWidget`.
93
+
From dynamic forms to constantly changing sales and marketing pages, any design or layout can be streamed to your app
94
+
via the `CodelesslyWidget`.
88
95
89
-
To learn how to use the Codelessly editor to publish layouts, check out our [3-minute Quickstart Guide](https://docs.codelessly.com/getting-started/3-minute-quick-start).
96
+
To learn how to use the Codelessly editor to publish layouts, check out
Customize Codelessly CloudUI™ widgets by passing data values into your layout. The UI will dynamically replace any variables defined in the Codelessly editor with the provided values.
101
+
Customize Codelessly CloudUI™ widgets by passing data values into your layout. The UI will dynamically replace any
102
+
variables defined in the Codelessly editor with the provided values.
94
103
95
104
```dart
96
105
CodelesslyWidget(
@@ -107,7 +116,8 @@ Use the `${}` templating syntax in input fields to link data from the Codelessly
107
116
108
117

109
118
110
-
To link the title of a text widget to the `title` variable in the Codelessly editor, put `${title}` in the text widget’s text field.
119
+
To link the title of a text widget to the `title` variable in the Codelessly editor, put `${title}` in the text widget’s
120
+
text field.
111
121
112
122
> **Note:** All data passed into the Codelessly widget is stored in the `data` object.
113
123
>
@@ -127,7 +137,8 @@ CodelesslyWidget(
127
137
),
128
138
```
129
139
130
-
Here, `data` parameter is a map of type `Map<String, dynamic>` which is used to populate information in the layout UI where `data`
140
+
Here, `data` parameter is a map of type `Map<String, dynamic>` which is used to populate information in the layout UI
141
+
where `data`
131
142
variable is used from the Codelessly editor. The layout UI will automatically update to reflect the new data whenever
132
143
the `data` is updated.
133
144
@@ -156,7 +167,8 @@ Here, we tell the button to call the native `onNextButtonClicked` function when
156
167
157
168

158
169
159
-
In the Codelessly Editor, you can easily add an Action to a widget. Use the `Call Function` action to invoke `onNextButtonClicked`.
170
+
In the Codelessly Editor, you can easily add an Action to a widget. Use the `Call Function` action to invoke
171
+
`onNextButtonClicked`.
160
172
161
173
1. Switch to the `Develop` tab.
162
174
2. Select a widget to open the `Actions` panel.
@@ -165,9 +177,11 @@ In the Codelessly Editor, you can easily add an Action to a widget. Use the `Cal
165
177
4. Click on the `Settings` button to bring up the `Action Settings` popup.
166
178
5. Reference the function name in the `Function Name` field. For example, `onNextButtonClicked`.
167
179
168
-
**Note:** The `CodelesslyFunction` provides a `CodelesslyContext` which provides internal access to the widget's data, variables, conditions, functions, etc.
180
+
**Note:** The `CodelesslyFunction` provides a `CodelesslyContext` which provides internal access to the widget's data,
181
+
variables, conditions, functions, etc.
169
182
170
-
**Note 2:** You can declare `data` and `functions` in the global `Codelessly` instance to make them globally accessible to all `CodelesslyWidget`s.
183
+
**Note 2:** You can declare `data` and `functions` in the global `Codelessly` instance to make them globally accessible
184
+
to all `CodelesslyWidget`s.
171
185
172
186
## CodelesslyWidget Options
173
187
@@ -181,14 +195,19 @@ CodelesslyWidget(
181
195
)
182
196
```
183
197
184
-
- `layoutID`: The ID of the published canvas. The ID can be found in Quick Preview or under `Publish > Settings > Published Layouts`.
198
+
- `layoutID`: The ID of the published canvas. The ID can be found in Quick Preview or under
199
+
`Publish > Settings > Published Layouts`.
185
200
186
201

187
202
188
-
- `isPreview`: Whether the layout is in preview or production mode. Preview mode is meant for debugging the layout and syncs with the changes made in the editor. Widgets in production mode are only updated when published using the Publish button.
189
-
- `config`: An optional `CodelesslyConfig` that holds the information required to authenticate your layout from the server.
203
+
- `isPreview`: Whether the layout is in preview or production mode. Preview mode is meant for debugging the layout and
204
+
syncs with the changes made in the editor. Widgets in production mode are only updated when published using the
205
+
Publish button.
206
+
- `config`: An optional `CodelesslyConfig` that holds the information required to authenticate your layout from the
207
+
server.
190
208
191
-
**Note:** Setting a `CodelesslyConfig` on a CodelesslyWidget overrides the global Codelessly instance settings. This lets you embed layouts from other projects with different auth tokens.
209
+
**Note:** Setting a `CodelesslyConfig` on a CodelesslyWidget overrides the global Codelessly instance settings. This
210
+
lets you embed layouts from other projects with different auth tokens.
192
211
193
212
## Environment Configuration
194
213
@@ -212,13 +231,16 @@ CodelesslyWidget(
212
231
213
232
> Realtime UI updates - edits made in the Codelessly Editor are mirrored immediately to the app.
214
233
215
-
When `isPreview` is set to true, the CodelesslyWidget will stream UI updates from the Codelessly Editor in realtime. Any edits to the UI in the editor will update in the app immediately. We think this is a pretty amazing feature so give it a try!
234
+
When `isPreview` is set to true, the CodelesslyWidget will stream UI updates from the Codelessly Editor in realtime. Any
235
+
edits to the UI in the editor will update in the app immediately. We think this is a pretty amazing feature so give it a
236
+
try!
216
237
217
238
Use preview mode to test and prototype UI quickly.
218
239
219
240
#### Flavor Support
220
241
221
-
A common request is to enable Preview mode in QA environments to support updating the UI on test user's devices. That can be done by setting the `isPreview` value based on the flavor or runtime environment.
242
+
A common request is to enable Preview mode in QA environments to support updating the UI on test user's devices. That
243
+
can be done by setting the `isPreview` value based on the flavor or runtime environment.
222
244
223
245
```dart
224
246
// Global config.
@@ -235,9 +257,13 @@ This enables realtime updates on release devices in a test environment, excludin
235
257
236
258
> Publish UIs with absolute control over updates and versioning.
237
259
238
-
`isPreview`should be set to false for production environments to prevent the UI from changing. When running in Publish (aka Production) mode, UI changes must be explicitly published to update the UI. This makes working in the editor safe and prevents undesired changes from reaching end users.
260
+
`isPreview`should be set to false for production environments to prevent the UI from changing. When running in
261
+
Publish (aka Production) mode, UI changes must be explicitly published to update the UI. This makes working in the
262
+
editor safe and prevents undesired changes from reaching end users.
239
263
240
-
**Note:** You do not need to change layoutIDs when switching from Preview to Production. Canvases have a single unique layoutID that the system uses to identify layouts with. Codelessly Servers will automatically handle loading the correct layout when moving from Preview to Production.
264
+
**Note:** You do not need to change layoutIDs when switching from Preview to Production. Canvases have a single unique
265
+
layoutID that the system uses to identify layouts with. Codelessly Servers will automatically handle loading the correct
0 commit comments