You can upload a zip file containing some JS files and HTML files to generate the view of your Excel block in stead of using the "default" view.

 

With this little piece of code you can generate your own view and use the data from the Excel block.  

 

// Example main.js

// LIST VIEW
function onLoad(){
document.title = App.Properties.__caption;
getAllRecords();
};

function getAllRecords(){

//Get all the records available in the excel building block
App.getRecords(function(records){
var $container = $('#container');
//Loop through each record
for(var i = 0; i < records.length; i++){

//Get the current record
var record = records[i];

//Give each div an unique id
var $divTag = $('<div class="product" data-id="'+ record.aminternalid +'" style="margin: 5px 0 15px 0;" />');


//Append the results to the html
$('<img width="300" height="300" />').attr('src', record.imageurl).appendTo($divTag);
$('<div id="title" style="color:#ffffff;font-weight: bold;"></div>').text(record.title).appendTo($divTag);
$('<div id="description" style="color:#ffffff;"></div>').text(record.description).appendTo($divTag);

$container.append($divTag);
}

//On click save the currentID and navigate to Detail Block.
$('.product').on('click', function()
{
var currentItemId = $(this).data('id');
App.Core.navigateToDetail(currentItemId);

});
});
};

 

// Example of index.html

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My app</title>
<link rel="stylesheet" type="text/css" href="/bridge/styles.css" >
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="/bridge/core.js"></script>
<script src="/js/main.js"></script>
</head>
<body onload="onLoad()">
<div id="container"></div>
</body>
</html>