v14 - Javascript question - Calling async function from inside render - Section Just Displays [object Promise]
Maybe more of a javascript question than an Umbraco question.
I need to do some async work from inside the render method of my custom dashboard. The render method exposed by EmbElementMixin doesn't seem to be called with an await, so if I change
render()
to
async render()
Now I'm returning a promise which the calling umbraco library isn't awaiting so my Screen just shows [object Promise] instead of my html.
I've tried a half dozen ways of returning html that depends on an async value, and while I can certainly get my code to execute and build an html string I'm not sure how to return that string from inside a .then() callback function since callbacks themselves return promises.
Oooh, I think that first link about lit Task is exactly what I needed. I'm still trying to get the import working since it doesn't seem lit/task is exposed in @umbraco-cms/backoffice/external/lit so maybe I need to add lit as a root dependency
The second example I think I tried, that is, calling my async function from inside the html using return html${this.getSomeUrlAsync()}; and it just returned 'Object.promise' as html text.
In the end I wasn't able to get the lit Task working even though I think that's the correct solution. I want to be able to import 'Task' from @umbraco-cms/backoffice, but I couldn't find the correct 'import' statement to put at the top of my typescript file.
The solution for me was to use lit 'state' variable and a connectedCallback method that is executed before render is called.
export default class IFrameSectionElement extends UmbElementMixin(LitElement) {
@state() // Allows an async connected callback method to fill this property before render is called
private iframeUrl?: string;
// Do async work inside this function
override async connectedCallback() {
super.connectedCallback();
this.iframeUrl = await this.getIFrameUrl();
}
render() {
return html`
<div class="frame-container">
<iframe class="full-frame" src="${this.iframeUrl}" />
</div>
`;
}
}
v14 - Javascript question - Calling async function from inside render - Section Just Displays [object Promise]
Maybe more of a javascript question than an Umbraco question.
I need to do some async work from inside the render method of my custom dashboard. The render method exposed by EmbElementMixin doesn't seem to be called with an await, so if I change
to
Now I'm returning a promise which the calling umbraco library isn't awaiting so my Screen just shows [object Promise] instead of my html.
I've tried a half dozen ways of returning html that depends on an async value, and while I can certainly get my code to execute and build an html string I'm not sure how to return that string from inside a .then() callback function since callbacks themselves return promises.
}
Anybody have a suggestion?
Does this help
https://lit.dev/docs/data/task/
I believe it should be done like below (but don't take my word for it.
${this.renderPollProps()}is an async functionOooh, I think that first link about lit Task is exactly what I needed. I'm still trying to get the import working since it doesn't seem lit/task is exposed in @umbraco-cms/backoffice/external/lit so maybe I need to add lit as a root dependency
The second example I think I tried, that is, calling my async function from inside the html using return html
${this.getSomeUrlAsync()}; and it just returned 'Object.promise' as html text.Thanks for your help!
In the end I wasn't able to get the lit Task working even though I think that's the correct solution. I want to be able to import 'Task' from @umbraco-cms/backoffice, but I couldn't find the correct 'import' statement to put at the top of my typescript file.
Should I be able to do this?
The solution for me was to use lit 'state' variable and a connectedCallback method that is executed before render is called.
Thanks to Jacob Overgaard in https://github.com/umbraco/Umbraco-CMS/discussions/17042
is working on a reply...