Button to go back to previous dashboard

Is it possible to create a button that goes back to previous dashboard.
I have several dashboards where temperatures dummy redirects to a climate dashboard and on that one i want to have a back button that redirects to previous dashboard.


You could create a Template / custom widget with the following action on click:



How do i also create a Title of the button?


I am stuck.

I can not figure out how i in the template show the label Back and execute history.back();

I have still not succeeded to do a template with Title and Back function.

Can someone help me with this.


Hi, I implemented a back button the following way:
in conf/html insert habpanel_widget_backbutton.js with the following content:

angular.module("backButton", [])
.directive("backButton", ["$window", function ($window) {
    return {
        restrict: "A",
        link: function (scope, elem, attrs) {
            elem.bind("click", function () {

Then create a custom widget with the following content:

<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
                 display: flex; margin: 0; padding: 0; overflow:hidden"
	<button back-button style="width: 100%; display: flex; 
                                                align-items: center;
                                                justify-content: center; 
                                                border: none;
                                                background-color: #223344;">
    <img src="../images/classic/goback.svg"></img>

Here, the goback.svg image is placed in the folder icons/classic.
The goback.svg file has the following content:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X8 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="64px" height="64px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 6400000 6400000"
  <style type="text/css">
    .str0 {stroke:black;stroke-width:199963;stroke-linejoin:round}
    .fil1 {fill:none}
    .fil0 {fill:white}
 <g id="Ebene_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
   <path class="fil0" d="M104056 3241457c0,-43347 17717,-84450 48781,-114686l3194212 -2936375c58820,-57284 133112,-56221 183073,-35670 49961,20552 103230,70277 103230,150238l0 990367c0,149175 124371,270358 277562,270358l2218610 0c92127,0 166420,72402 166420,162167l0 3027203c0,89646 -74411,162167 -166538,162167l-2219673 0c-153191,0 -277562,121064 -277562,270239l118 991430c0,79962 -53269,129687 -103230,150238 -49961,20551 -123190,21614 -180947,-35670l-3196457 -2938500c-31063,-29174 -47717,-70277 -47717,-113506l118 0zm0 0l0 0 0 0z"/>

It works for me so far, maybe somebody finds a better way.


Thanks @DanielS it worked exactly as i wanted.


Thankyou. I implemented a refresh button based on this: Custom Javascript code Refresh button

@ysc should we consider adding this (optionally) to the top bar near the menu button or near the refresh button?

Most likely the buttons of tablets are hidden to have a larger screen. We could also extend this to make all the buttons configurable.

1 Like