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`.
45
44
46
-
Information on customizing SDK initialization can be found later in the documentation.
45
+
#### **Step 3: Embed the CodelesslyWidget**
47
46
48
-
#### Step 3: Get a Layout ID from the Codelessly Editor
49
-
50
-
Easily embed a design from the Codelessly Editor into your app with a `layoutID`. The `CodelesslyWidget` enables your app to update its UI over the air.
47
+
Easily embed any design from the Codelessly Editor into your app using the `layoutID`.
51
48
52
49
```dart
53
50
CodelesslyWidget(
54
51
layoutID: LAYOUT_ID,
55
52
)
56
53
```
57
54
55
+
**How to obtain a Layout ID**
56
+
58
57
1. In the Codelessly Editor, select the **canvas** of your layout.
59
58
2. Press the **Preview Icon** in the toolbar. 
Refer to the later sections for how to pass variables and functions to the CodelesslyWidget.
65
-
66
-
#### Full Example: Putting it All Together
67
-
68
-
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!
63
+
### Complete Example
69
64
70
65
Here is a complete example:
71
66
@@ -87,25 +82,38 @@ class MyApp extends StatelessWidget {
87
82
}
88
83
```
89
84
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!
86
+
90
87
From dynamic forms to constantly changing sales and marketing pages, any design or layout can be streamed to your app via the `CodelesslyWidget`.
91
88
92
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).
93
90
94
-
## Data
91
+
## Injecting Data
95
92
96
-
Customize Codelessly CloudUI™ widgets by passing data into your layout. The UI will dynamically replace any variables defined in the Codelessly editor with the provided values.
93
+
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.
97
94
98
-
95
+
```dart
96
+
CodelesslyWidget(
97
+
layoutID: LAYOUT_ID,
98
+
data: {
99
+
// A map of variables, Map<String, dynamic>
100
+
},
101
+
),
102
+
```
99
103
100
-
**Step 1:** Use the `${}` templating syntax in input fields to link data from the Codelessly editor to layouts as shown below.
104
+
#### **Step 1:** Define variables in the Codelessly Editor
105
+
106
+
Use the `${}` templating syntax in input fields to link data from the Codelessly editor to layouts as shown below.
107
+
108
+
101
109
102
110
To link the title of a text widget to the `title` variable in the Codelessly editor, put `${data.title}` in the text widget’s text field.
103
111
104
-
> The `data` object contains all the variables passed to the CodelesslyWidget.
112
+
> **Note:** The `data` object contains all the variables passed to the CodelesslyWidget.
105
113
>
106
114
> Use `${data.title}` to access the `title` variable passed from the client. `${title}` alone is a Codelessly variable and will try to load variables defined in Codelessly, not your client.
107
115
108
-
**Step 2:** Once this is set from the editor, you can provide the data to the layout from your app.
116
+
#### **Step 2:** Pass data to the layout from your app.
109
117
110
118
```dart
111
119
CodelesslyWidget(
@@ -127,22 +135,22 @@ This how it looks with populated data:
127
135
128
136
## Functions
129
137
130
-
Codelessly SDK also supports providing callback functions for user actions such as onClick, onLongPress, etc.
138
+
Codelessly SDK also supports calling functions for user actions such as onClick, onLongPress, etc.
The `functions` parameter takes a map of type `Map<String, CodelesslyFunction>` which is used to execute functions defined as action calls in the Codelessly editor.
144
150
145
-
Here, we define an `onNextButtonClicked` function that can be invoked by the widget. Once a function is provided, it can be referenced by name in the Codelessly Editor.
151
+
#### **Step 1:** Add a "Call Function" Action in the Codelessly Editor
152
+
153
+
Here, we tell the button to call the native `onNextButtonClicked` function when pressed.
146
154
147
155
148
156
@@ -155,11 +163,11 @@ In the Codelessly Editor, you can easily add an Action to a widget. Use the `Cal
155
163
4. Click on the `Settings` button to bring up the `Action Settings` popup.
156
164
5. Reference the function name in the `Function Name` field. For example, `onNextButtonClicked`.
157
165
158
-
The `CodelesslyFunction` provides a `CodelesslyContext` which provides internal access to the widget's data, variables, conditions, functions, etc.
166
+
**Note:** The `CodelesslyFunction` provides a `CodelesslyContext` which provides internal access to the widget's data, variables, conditions, functions, etc.
159
167
160
-
**Note** You can declare `data` and `functions` in the global `Codelessly` instance to make them globally accessible to all `CodelesslyWidget`s.
168
+
**Note 2:** You can declare `data` and `functions` in the global `Codelessly` instance to make them globally accessible to all `CodelesslyWidget`s.
161
169
162
-
## CodelesslyWidget Customization
170
+
## CodelesslyWidget Options
163
171
164
172
```dart
165
173
CodelesslyWidget(
@@ -180,7 +188,7 @@ CodelesslyWidget(
180
188
181
189
**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.
182
190
183
-
## Configuring Environments
191
+
## Environment Configuration
184
192
185
193
The CodelesslyWidget supports **Preview** and **Published** environments via the `isPreview` boolean.
0 commit comments