Another option is discussed on the map journal github page. Scroll down to the section that starts with "You can also add that capability to map feature popups."
Here's a conversation detailing the process a little more thoroughly. I had to use this method the find the layerID. Also for some reason my feature class was having trouble with the OBJECT ID as the identifier so like Tim I created a new field with section number. My app is here and my code looks like this:
<script type="text/javascript" src="app/main-config.js"></script>
<script type="text/javascript">
require(["dojo/topic"], function(topic) {
/*
* Custom Javascript to be executed while the application is initializing goes here
*/
// The application is ready
topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/
});
//scott
/*
* Set up a click handler on the feature of the map to navigate the story
*/
//
// *************************************
// Configure the webmap id and layer id
// *************************************
//
// First find the webmap id through the URL when you open the map in Map Viewer
// To get the layer id, paste the webmap id below and open the application,
// then open the developer console, all the layers ids will be listed,
// find the correct one and paste it below
// After this setup, clicking the 3rd feature of your layer, will navigate to the third entry
//
var WEBMAP_ID = "c62e6684ad464af08922c040acd8e78b",
LAYER_ID = "ZooTour_9137";
var clickHandlerIsSetup = false;
topic.subscribe("story-loaded-map", function(result){
if ( result.id == WEBMAP_ID && ! clickHandlerIsSetup ) {
var map = app.maps[result.id].response.map,
layer = map.getLayer(LAYER_ID);
console.log(map.graphicsLayerIds);
if ( layer ) {
layer.on("mouse-over", function(e){
map.setMapCursor("pointer");
map.infoWindow.setContent("<b>"+e.graphic.attributes.name.split(",")[0]);
map.infoWindow.show(e.graphic.geometry);
});
layer.on("mouse-out", function(e){
map.setMapCursor("default");
map.infoWindow.hide();
});
layer.on("click", function(e){
var index = e.graphic.attributes["SECTIONNUM"];
topic.publish("story-navigate-section", index);
});
}
clickHandlerIsSetup = true;
}
});
});
</script>