Hey Ostermik,
You know I just managed to do something that I hope it helps.
export function VirtualTourButton_click(event, $w) {
let virtualtourlink = $w("#virtualtourlink").value;
if ($w("#virtualtourlink").value.length > 0) {
$w("#VirtualTourButton").label = "Cargando"
$w("#CasasVdataset").setFieldValue("tour360Link", virtualtourlink)
.then (() => {
$w("#htmlVirtualTour").src = virtualtourlink;
$w("#VirtualTourButton").label = "Listo";
})
.catch( (uploadError) => {
$w("#VirtualTourButton").label = "Error al Cargar";
console.log(`Error: ${uploadError.errorCode}`);
console.log(uploadError.errorDescription);
});
}
}
To put you in context, I need to display virtual tours on some dynamic pages, so I used one of those html components, especifically the one that lets you embed a SITE (not the one that says html code). Now I have two types of dynamic pages, one which is displayed to my site’s visitors, and one that can only be seen by team members and is basically an input form with every detail of the property listing. The code you see is the one I used for the latter, and the difference is that this page must display the virtual tour in real time as in a preview of what visitors will see, so my team members can check if the tour is the right one and if everything is working fine with it, I haven’t tested yet on the other dynamic pages, the one for my visitors, but I’m pretty sure this will work in that case too.
I’ll explain (as far as I can) the code. First I placed an input field, which is set to accept URL’s only, the field is connected to the dataset (#CasasVdataset) which is connected to my database where I have a field with a fieldName ‘Tour 360 Link’ and a fieldKey ‘tour360Link’ (this is the one in grey that you can’t change). After this, I placed a button (a normal one not an Upload Button) for which I added an onClick event on the Properties Panel in the Editor. Once you do this, in the code section I wrote the code above, that basically reads if there is something on the input field, if true, then it changes the name of the button to ‘Cargando’ or ‘Loading’ and at the same time it sets the field value with the link that is on the input field. After that, it tells the html component ‘htmlVirtualTour’ that the site it must display is the one that was entered on the input field, and changes the button label to ‘Listo’ or ‘Ready’. The last part is just in case there is some error, it lets us know and also to my team member by displaying the button label ‘Error al Cargar’ or ‘Upload Error’.
Here are a couple of screenshots so you can relate what I wrote and have a better understanding.
This is the preview mode on the editor:
Here is how my code looks in case you need:
Now, the code should work on the dynamic pages that are meant to be seen by my visitors, of course it might change a bit, but you can use this as a reference, or I can copy it here once I build that dynamic page for my site.
In case this is confusing I’ll write next what things you must replace for the elements you decide to use:
#virtualtourlink: with your input field ID (the one you set in the properties panel)
#VirtualTourButton: with the button ID
#CasasVdataset: with your dataset name
“tour360Link”: with the fieldKey assigned to your field that holds the URL (remember the fieldKey is the one in grey that you can’t change)
#htmlVirtualTour: with your html component ID
virtualtourlink: this is the one you see after ‘let’ and you can name it as you want, of course you will have to change it on the other parts of the code too (right after “tour360Link” and after .src =)
And that’s it, I hope it is clear, as I said, this should work for you too, the only thing I think you will have to come up with is how to trigger it, because in this case I used a button. For now it occurs to me that you should place it inside the onReady page’s section, and maybe create an onReady function for the dataset too.
If you make it work let me know, and maybe share it here too. Good luck!!
