Skip to content

Commit 294ea5f

Browse files
authored
[fix] Resolve an undefined error stemming from createRetoolEmbed params, update docs (#3)
* resolve an undefined error stemming from createRetoolEmbed params * update readme
1 parent 1c71e38 commit 294ea5f

File tree

2 files changed

+70
-2
lines changed

2 files changed

+70
-2
lines changed

README.md

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,72 @@ getEmbedUrl().then((retoolEmbedUrl) => {
7777
});
7878
```
7979

80+
81+
### Full example: Two-way communication between Retool and the embedding application
82+
83+
```JavaScript
84+
import { createRetoolEmbed } from "@tryretool/retool-embed";
85+
86+
let embeddedRetool
87+
88+
const advancedRetool = (value) => {
89+
embeddedRetool.data = {advancedUser: value}
90+
}
91+
92+
let app = document.querySelector('#app')
93+
94+
// advanced user toggle
95+
const advancedCheckbox = document.createElement('input')
96+
advancedCheckbox.type = 'checkbox'
97+
advancedCheckbox.onclick = () => advancedRetool(advancedCheckbox.checked)
98+
const advancedLabel = document.createElement('label')
99+
advancedLabel.innerText = 'Advanced User'
100+
app.appendChild(advancedCheckbox)
101+
app.appendChild(advancedLabel)
102+
103+
const eventContainer = document.createElement('div')
104+
eventContainer.className = 'eventContainer'
105+
app.appendChild(eventContainer)
106+
107+
// iframe container
108+
let container = document.createElement('div')
109+
container.className = 'iframeContainer'
110+
app.appendChild(container)
111+
112+
// handle event from retool
113+
const handleRetoolClick = (data) => {
114+
eventContainer.classList.add('active')
115+
eventContainer.innerText = data
116+
}
117+
118+
// set up retool
119+
const getEmbedUrl = async () => {
120+
const res = await fetch('http://localhost:8000/generateEmbeddedRetoolURL',
121+
{
122+
method: 'POST',
123+
headers: {"Content-Type": "application/json"},
124+
body: JSON.stringify({
125+
username: 'specialuser',
126+
}),
127+
}
128+
)
129+
return (await res.json()).embedUrl;
130+
}
131+
132+
getEmbedUrl().then((retoolEmbedUrl) => {
133+
embeddedRetool = createRetoolEmbed({
134+
src: retoolEmbedUrl,
135+
style: "border: 1px solid blue; height: 98%; width: 100%;",
136+
data: {advancedUser: false},
137+
onData: (data) => {
138+
handleRetoolClick(data)
139+
}
140+
});
141+
container.appendChild(embeddedRetool)
142+
});
143+
144+
```
145+
80146
#### Generating an embed URL
81147

82-
Ensure you generate the embed URL on a secure, authenticated backend server. Follow our[documentation](https://docs.retool.com/apps/external/quickstarts/embed#3-create-an-embed-url) for detailed instructions.
148+
Ensure you generate the embed URL on a secure, authenticated backend server. Follow our [documentation](https://docs.retool.com/apps/external/quickstarts/embed#3-create-an-embed-url) for detailed instructions.

src/createRetoolEmbed.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export type RetoolEmbedAttributes = {
44
src: string;
55
style?: string;
66
onData?: (data: any) => void;
7+
data?: any;
78
};
89
export function createRetoolEmbed(
910
attributes: RetoolEmbedAttributes
@@ -16,7 +17,8 @@ export function createRetoolEmbed(
1617
) as RetoolEmbed;
1718
client.setAttribute("src", attributes.src);
1819
client.customStyle = attributes.style;
19-
20+
client.data = attributes.data;
2021
client.onData = attributes.onData;
22+
2123
return client;
2224
}

0 commit comments

Comments
 (0)