The way you should do this is by adding an Excel building block to your app.
Next add the JavaScript block as child of the Excel block, this will allow you to access the data from the Excel block.
You can find information about the JavaScript SDK over here: https://appmachine.freshdesk.com/support/solutions/articles/80000978285-module-core-js
Or see the sample I've attached below:
Example main.js
function onLoad(){
document.title = App.Properties.__caption;
window.App.Core.getCurrentRecord(function(record) {
getRecord(record);
});
// Will update the current record when the user uses the next/previous buttons on the screen
window.App.on('currentItemChanged', function(record) {
getRecord(record);
});
};
function getRecord(record){
//Record does contain the JSON version of the selected item
//Show a popup with the results of the Excel sheet in JSON format
//alert(JSON.stringify(record));
//Get the DIV with the specific ids and insert the result of the Excel sheet fields
document.getElementById('photo').innerHTML = '<img width="300" height="300" src="'+ record.imageurl +'"/>';
document.getElementById('title').innerText = record.title;
document.getElementById('description').innerText = record.description;
};
Example of index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JavaScript Block</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- AppMachine Stylesheet -->
<link rel="stylesheet" type="text/css" href="/bridge/styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- AppMachine modules -->
<script src="/bridge/core.js"></script>
<script src="/bridge/data.js"></script>
<script src="js/main.js"></script>
</head>
<body onload="onLoad()">
<div id="container"></div>
<div id="photo"></div>
<div id="title"></div>
<div id="description"></div>
</body>
</html>