Hi guys
Can someone help me with an example of a custom UI component for a menu? I want to create a menu using images or icons and need more control over the CSS. I understand that I should use the HTML iFrame for that, but would really appreciate a basic example.
Hi Fred
Sure thing, please see below example screenshot showing 3 different options.
The first two are using the standard <list /> component, the first with default icons and the second with custom icons/images (rendered slightly larger).
The third is using a custom HTML page.
Basically you have an HTML page that is rendering 6 divs (you can add images as well), each div is clickable and the click event is then passed back to the JourneyApps Runtime using the iFrame component. Below is the code
HTML
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<style type="text/css">
.flex-container {
display: flex;
justify-content: space-around;
padding: 5px
}
.menu-option {
border: 5px solid #228B22;
border-radius: 10px;
padding: 5px;
cursor: pointer;
width: 250px;
height: 100px;
line-height: 100px;
text-align: center;
}
</style>
<meta charset="UTF-8" />
<title>Custom Menu</title>
<script src="https://cdn.jsdelivr.net/npm/journey-iframe-client@0.2.0/dist/bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0" />
</head>
<body>
<div class="flex-container">
<div class="menu-option" onclick="clickMenuOption('Facility Stock')">Facility Stock</div>
<div class="menu-option" onclick="clickMenuOption('eOrdering')">eOrdering</div>
<div class="menu-option" onclick="clickMenuOption('eReceving')">eReceving</div>
</div>
<div class="flex-container">
<div class="menu-option" onclick="clickMenuOption('Dispensing')">Dispensing</div>
<div class="menu-option" onclick="clickMenuOption('ePOS')">ePOS</div>
<div class="menu-option" onclick="clickMenuOption('Facility Details')">Facility Details</div>
</div>
</body>
<script>
var client = new JourneyIFrameClient();
window.addEventListener('DOMContentLoaded', function () {
client.post("mounted", true)
});
function clickMenuOption(menuOption) {
console.log(`Menu clicked: ${menuOption}`);
client.post("clicked", menuOption);
}
</script>
</html>
View JS/TS - Runtime
// This function is called when the app navigates to this view (using a link)
function init() {
// initialize any data here that should be available when the view is shown
registerListeners();
}
// This function is called when the user returns to this view from another view
function resume(from) {
// from.back (true/false) if true, the user pressed the "Back" button to return to this view
// from.dismissed (true/false) if true, the app dismissed to return to this view
// from.path contains the path of the view that the user returned from
// if any data needs to be refreshed when the user returns to this view, you can do that here:
}
function registerListeners() {
component.html({id: 'custom-menu'}).on('mounted', function () {
console.log('Html ready to be used');
})
component.html({id: 'custom-menu'}).on('clicked', function (event) {
// handle the menu click event here
// navigate to a different view, etc.
console.log('Received click event from HTML, ' + event);
journey.dialog.simple({title: "Menu Clicked", message: "The following menu item was clicked " + event});
})
}
View XML
<?xml version="1.0" encoding="UTF-8"?>
<view title="Basic Menu Layout">
<heading>Using FONT AWESOME OR IONICONS</heading>
<columns>
<column>
<list>
<list-item>
<header value="Facility Stock" />
<asset icon="fa-boxes" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="Dispensing" />
<asset icon="fa-pills" color="positive" />
</list-item>
</list>
</column>
<column>
<list>
<list-item>
<header value="eOrdering" />
<asset icon="fa-cart-arrow-down" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="ePOS" />
<asset icon="fa-calculator" color="positive" />
</list-item>
</list>
</column>
<column>
<list>
<list-item>
<header value="eReceiving" />
<asset icon="fa-dolly" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="Facility Details" />
<asset icon="fa-warehouse" color="positive" />
</list-item>
</list>
</column>
</columns>
<heading>Using Your Own CUSTOM ICONS</heading>
<columns>
<column>
<list>
<list-item>
<header value="Facility Stock" />
<asset src="icons/Upload.png" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="Dispensing" />
<asset src="icons/Upload.png" color="positive" />
</list-item>
</list>
</column>
<column>
<list>
<list-item>
<header value="eOrdering" />
<asset src="icons/Wind.png" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="ePOS" />
<asset src="icons/Wind.png" color="positive" />
</list-item>
</list>
</column>
<column>
<list>
<list-item>
<header value="eReceiving" />
<asset src="icons/Rig.png" color="positive" />
</list-item>
</list>
<list>
<list-item>
<header value="Facility Details" />
<asset src="icons/Rig.png" color="positive" />
</list-item>
</list>
</column>
</columns>
<heading>USING HTML iFRAME CLIENT</heading>
<html id="custom-menu" src="html/custom-menu.html" show-fullscreen-button="false" height="400px"/>
</view>