Problems with reloading a custom dashboard and getting a 404.

dcaron

Hello,

So I am following the Dashboard Training tutorial in order to set up a custom dashboard.
However, the tutorial seems slightly out of date, so even after following it exactly I am having trouble when I reload the webpage I get a 404.

For example my URL to see my custom template is http://10.1.10.22:8080/modules/dashboards/web/custom1
I load that up and can use the page like expected.
But if I try reloading from somewhere like http://10.1.10.22:8080/modules/dashboards/web/custom1/visualizations/charts
I get a 404.

I assume it has something to do with my index.html?
0_1475847809433_2016-10-07-custom1 - Mango .22 - WinSCP.png

0_1475847768696_index.html

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>custom1</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <base href="/modules/dashboards/web/custom1/">
    
    <link rel="icon" type="image/png" sizes="192x192" href="../img/icon192.png">
    <link rel="icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="../img/icon128.png">
    <link rel="manifest" href="manifest.json">
    
    <link rel="stylesheet" href="/resources/angular-csp.css"></link>
    <link rel="stylesheet" href="../vendor/angular-material/angular-material.css">
    <link rel="stylesheet" href="../vendor/angular-loading-bar/loading-bar.css">
    <link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css">
    <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css">
    <link rel="stylesheet" href="../vendor/angular-material-data-table/md-data-table.css">
    <link rel="stylesheet" href="styles/main.css">
</head>

<body layout="column" ng-class="{'api-down': !mangoWatchdog.apiUp, 'logged-out': !mangoWatchdog.loggedIn}">
	<div ng-if="appLoading" class="app-loading">
		<i class="fa fa-cog fa-spin"></i>
	</div>

    <div ui-view ng-cloak layout="column" flex class="main-application"></div>

    <script src="/resources/require.js"></script>
    <script src="/resources/loaderConfig.js"></script>
    <script src="../js/loaderConfig.js"></script>
    <!-- Rename adminTemplate to the name of the folder you create in overrides -->
    <script>require(['dashboards/custom1/app']);</script>
</body>
</html>

JoelHaggar

Can you tell me what tutorials you were following so I can see if the need to be removed or updated? Thanks, Joel.

dcaron

@JoelHaggar

https://vimeo.com/album/4067258

dcaron

@JoelHaggar In the tutorial, there wasn't a <base href=> tag in the index.html, So I wasn't sure what to change it to.

Jared Wiltshire

Hey @dcaron
The dashboards do indeed operate a little differently now and we need to update the tutorials.

The adminTemplate now has the HTML 5 mode URLs enabled in app.js (i.e. no /#/... urls). You should set the base url in index.html to
<base href="/user-dashboards/custom1/"> and access your dashboards using /user-dashboards/custom1/home or /user-dashboards/custom1/visualizations/charts

If you want you can disable the HTML 5 mode URLs by setting $locationProvider.html5Mode(false); in app.js, you would then set <base href="/modules/dashboards/web/custom1/"> in index.html and your URLs would look like /modules/dashboards/web/custom1/#/home and /modules/dashboards/web/custom1/#/visualizations/charts

I'd highly recommend the first option, it gives much shorter nicer URLs.

dcaron

@Jared-Wiltshire Thanks! I made that change, but I am now having an issue rebooting the Mango server. I had to take it down to move it.

I posted a new topic here: http://infiniteautomation.com/forum/topic/2488/java-error-during-init-cannot-map-handler-there-is-already-handle-of-type-xxx-mapped

Java cannot map handler to the URL path of my custom dashboard because apparently there is already a handler of that type mapped.