Hype + Blocs - Text Placeholders

9

I think @MarkHunte's answer probably is the right approach since it uses some of the constructs from Blocs like their custom attributes.

When I was trying to use the Hype Bric that wasn't a possibility. My answer hasn't been tested at all, but this is what I had previously written:

My test license to Blocs is for an older version, so I'm not quite able to fully flesh out the workflow right now... but I think the answer would be "yes, but it will be a little bit tricky."

It will definitely venture into using some JavaScript code territory, but isn't a lot and hopefully relatively straight forward.

Right now Blocs has a "Bric" for Hype that makes it pretty easy to embed Hype content. See:

https://help.blocsapp.com/knowledge-base/hype/

Unfortunately, there really aren't too many options for this bric to help control inner content.

The good news is that the Hype Bric puts Hype content directly on the webpage (vs in an isolated iframe), so this at least makes modifications a bit easier.

I think there would be two main steps:

  1. Make sure you have a deterministic ordering for each of the elements on the page
  2. Apply values from a table of data in this ordering

Working backwards, if you want the editing to be in Blocs, the way I'd probably store data would be in the Blocs Page Settings > Code section. This could be a little bit of JavaScript JSON. It might look something like:

<script>
window.tourDates = [
    {"date" : "Jan 20, 2023", "location": "Nashville, TN"},
    {"date" : "Jan 23, 2023", "location": "San Francisco, CA"},
];
</script>

The JSON data has each line as an entry. It takes the form of "key" : "value", so if you need more data per item in your document, you could add more keys like that. If you will have more entires, then add a whole line that matches the {...}, part in the list.

Now you need to work on step one which can determine which item from the list to apply to which Hype animation on the page.

I'd probably do this within the Hype document itself; it should be able to figure out its basic order on the page by looking at all elements that match the main Hype container div class, and seeing which one it is.

This can be added as a Run JavaScript… action on any On Scene Load event for scenes that need to replace values:


var documentElements = document.getElementsByClassName("HYPE_document");
var currentDocumentElement = hypeDocument.getElementById(hypeDocument.documentId());
var documentIndex = documentElements.indexOf(currentDocumentElement);
var currentTourDate = window.tourDates[documentIndex];

Now in the Hype document, we have the tour date. So the next thing to do would be to take the data from the individual tour date and apply it to elements in the scene.

I recommend doing this through class names, though there's certainly other ways to do it. So for an element meant to contain the date, you could add a class name in the Identity Inspector to a specific element. Let's call that class name "myDate". Likewise you can do the same for location, we'll just call that class name "myLocation".

Then you'd add a bit more code to the On Scene Load function you made before that would find these elements within the current scene and set the values. It would look like:


var currentSceneElement = hypeDocument.getElementById(hypeDocument.currentSceneId());

var dateElements = currentSceneElement.getElementsByClassName("myDate");
for(var i = 0; i < dateElements.length; i++) {
	dateElements[i].innerHTML = currentTourDate["date"];
}

var locationElements = currentSceneElement.getElementsByClassName("myLocation");
for(var i = 0; i < locationElements.length; i++) {
	locationElements[i].innerHTML = currentTourDate["location"];
}

And that should generally do the trick.

There's plenty of different approaches and ways to be more sophisticated (including using Hype Data Magic), but this is the general approach.

3 Likes