Button Links to Dashboards

Apps & Services HABPanel
1

I’m trying to figure out how you link one dashboard to another. I think this can be done with the Button Widget but unsure how you go about adding custom backgrounds.

Is it better to create a Template Widget or Custom Widget? I found info with these 2 posts, but unsure how you implement it.

1 Like
2

Button widgets can indeed act as links to other dashboards (Action type combobox in the General tab), and you can define colors for the background as well as the text.

If you prefer you can build a template with a link, either ad-hoc in a template widget or in a custom widget - custom widgets are basically like template widgets but reusable (you define configuration options for each instance of the widget but the template is shared).

3

Thanks.

I’ll try and work later tonight on a Template Widget that acts like a Button and links to another dashboard, hopefully with a background.

Its been years since I’ve done any html and css work so hopefully not to rusty :slight_smile:

4

So doing a little experimentation tonight. But not sure how you implement ng-click to link/reference a different dashboard, assuming I’m even on the right track.

I got a back ground showing like this, but can’t get it link and switch to the new dashboard.

code not working correctly

<div ng-init="ServerPath='/static'; IconSet='home'">
	<button><img src="{{ServerPath}}/images/{{IconSet}}/family_room.jpg" ng-click="$location.path(www.cnn.com)" /></button>
</div>

I wold have hoped clicking the image would opened cnn in testing, but it didn’t work.

Little late here for me, but i’ll keep learning what I can tonight.

5

Guess I’m still struggling with this basic dashboard linking. I removed the Image for now and just trying to get a button to open a different dashboard.

AngularJS is so new me not doing any coding and learning in years. I believe I want to use $location.path to redirect to the dashboard, but still not working.

How do you get button to open a new dashboard (without a refresh)

<div ng-init="ServerPath='/static'; IconSet='home'">
	<button> <a ng-click="$location.path('/Kitchen')" /a> Kitchen </button>
</div>
6

Hey Paul,

did you find out how to do it? Right now I am using the button with the link option, but I want to switch through my panels with buttons. I want the button with the active panel to be colored to see where I am right now.

Thank you in advance.

Greetings
Andreas

7

Hi Guys,
i need to pull this out of the Dark again.
I know a Button Widget can act to navigate to a different Dashboard, which is working fine.

What i would like to do is the following:
I like to modify a TEMPLATE Widget to act the same way as the button widget to navigate to a different Dashboard.
So i have the chance to display some data via the Template widget and then when touching the tile i want to jump to a different Dashboard.

How can i accomplish this? Do you have a sample text i can simple drop into a template widget and just modify my dashboard name to get an idea how this can work?

Many Thanks
Andreas

8

For anyone still looking on how to do this with a custom widget, simply use html links and set the href to the dashboard you want to visit. For example, here’s my “home button”:

<a href="http://openhab:8080/habpanel/index.html#/view/Navigation">
    <button class="btn btn btn-lg" style="background-color:transparent">
        <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
         width="100%" height="100%"
         viewBox="0 0 172 172"
         style=" fill:#000000;"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><path d="M43,172c-23.74824,0 -43,-19.25176 -43,-43v-86c0,-23.74824 19.25176,-43 43,-43h86c23.74824,0 43,19.25176 43,43v86c0,23.74824 -19.25176,43 -43,43z" fill="#e67e22"></path><g fill="#ffffff"><path d="M86,30.81387l-60.48098,54.43503h16.49481v49.48444h38.4879v-32.98962h10.99654v32.98962h38.4879v-49.48444h16.49481zM86,45.61195l32.98962,29.69281v4.44587v43.98617h-16.49481v-32.98962h-32.98962v32.98962h-16.49481v-48.43204z"></path></g></g></svg>
    </button>
</a>

when clicked, it simply links to the other dashboard

1 Like
9

I actually tried that, but it breaks the formatting of more complex widgets. From other threads I figured, it should work with a ng-init wrapper (like in the widget “Display - Button” ):

<div ng-init="foo = {'type': 'button',
                     'action_type': 'navigate',
                     'navigate_dashboard': '{{config.dashboard}}'}">
  <span class="batLevel badge badge-info">
  <div class="ng-binding ng-scope" style="margin-bottom: 10px">{{ngModel.name}}</div>
  <div class="value ng-binding">{{itemValue(config.robotStatus)}}</div>

(...) 

</div>

…but it does not. The Widget is not clickable. What is the right ng-directive here?

1 Like