// DETAIL VIEW

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 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>