I’ve got an interactive map that allows (via no color Buttons) the means to link to a Cart to rent Cabanas.
We’re finding an issue in not being able to preload which are actually available based on a Date.
Question: I can poll the Database and know based on a pre-selected date which elements should be available. Are there any examples of Content being affected by known data when loading a Hype page?
Ideas are adding a class if an elementID is available in an array or the opposite assign a class of “disable” if not present in an array.
Any other ideas I should be considering from those that have needed similar data based display results?
There are definitely examples on the forums with loading dynamic data with PHP (and JSON data), though I don’t think I found a canonical example in some searching myself. But I think you have the basic idea; my approach would be:
Have PHP code in your .html file (renamed to .php) or in a separate URL that outputs a JavaScript object. This can be a global. (If in a separate URL, you’ll need to make an AJAX call and do your own assignment)
Assign IDs or Class Names to the elements you want to toggle
On Scene Load add a Run JavaScript action that examines the JSON object and then changes visibility of the elements or whatever else you want to do
Here is an example using the method of a public published to web google sheet.
The sheet should only be for public data.
See this post on how to set that up.
A sheet can be shared with people/team who are the only ones who can edit it. Don via the normal google share options.
You can see the sheet used in the example below here but I have turned editing off for obvious reasons.
The main steps are read in you json file.
Then parse the data.
Then assign the data objects as needed.
Image wise you could serialise the byte data to a string and the reverse decode it but that is not really a good root to go and I have only ever used it for googke appscript. Even then I found other ways so as not to do that.
The best way is s to use an url string of the image
JSONP often makes thing easier concerning cross domain security. If it is simple JSON you are after just fetch it and parse it.
If you are planning on putting all data into one file and hence you need to put the images into your data, it will increase in size as Base64 encoded images are bigger, but they can be dynamically replaced using the HypeResourceLoad event.
If you can allow multiple request to load the images after the data stream you can just put only the image URLs into the data file (instead of the full data). They then will be loaded after you replace the background-image using hypeDocument.setElementProperty. This has the downside that you have to do your own preloading or you could experience small loading flashes.
Then something like Hype Data Fill might come in very handy to simplify assigning data in Hype with a minimal footprint. I am guessing this is dynamic data for ads
Another thing about fetching data. Don't put API keys into JavaScript as they are insecure if delivered to the end user. If there is some authentication involved to get the data consider a middle man approach when fetching data and putting the authentication into a server script and forwarding the data stream as that has the added benefit in dealing with CORS.
