Button to go back to previous dashboard

Apps & Services HABPanel
1

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.

/mike

2

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

history.back();
3

Thanks

How do i also create a Title of the button?

/Mike

4

I am stuck.

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

5

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

Can someone help me with this.

/Mike

6

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 () {
                $window.history.back();
            });
        }
    };
}]);

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"
     oc-lazy-load="['/static/habpanel_widget_backbutton.js']">
	<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>
  </button>
</div>

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"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str0 {stroke:black;stroke-width:199963;stroke-linejoin:round}
    .fil1 {fill:none}
    .fil0 {fill:white}
   ]]>
  </style>
 </defs>
 <g id="Ebene_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g>
   <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"/>
  </g>
 </g>
</svg>

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

4 Likes
7

Thanks @DanielS it worked exactly as i wanted.

/Mike

8

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

9

@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