State parameters

[CraigWeb]

Hi there, ive been strugling for a while now with something, hope i'm not just makeing a stupid mistake.
I am trying to follow this guide but with a tag query https://help.infiniteautomation.com/dynamically-generating-button-list/
This is my WL query : eq(tags.Site,{{site}})&sort(xid,name)&limit(200)
I have a overview page :

<ma-watch-list-get ng-model="designer.NSP" parameters="designer.NSP.parameters" on-points-change="designer.NSP.points = $points" id="NSP_ID" watch-list-xid="NSPQueryWL"  ></ma-watch-list-get>
<ma-watch-list-get ng-model="designer.KNZ" parameters="designer.KNZ.parameters" on-points-change="designer.KNZ.points = $points" id="KNZ_ID" watch-list-xid="KNZQueryWL"  ></ma-watch-list-get>
<ma-watch-list-get ng-model="designer.MAT" parameters="designer.MAT.parameters" on-points-change="designer.MAT.points = $points" id="MAT_ID" watch-list-xid="MATQueryWL"  ></ma-watch-list-get>
<div layout="row" layout-wrap="" layout-align="start stretch">

        <div flex="100" flex-gt-md="25" layout="column">
            <md-card>
                <md-toolbar class="md-whiteframe-1dp md-hue-3">
                    <div class="md-toolbar-tools">
                        <h1 flex="">
                            <span>Nelspruit </span>

                        </h1>
                    </div>
                </md-toolbar>
                <md-card-content>
                 <md-list ng-repeat="p in designer.NSP.points">
                            <md-list-item layout="">
                                 <md-button  ui-state="'ui.mbombela.siteViewer'" ui-state-params="{site: p.tags.Site}"> 
                              {{p.deviceName}}</md-button>
                                 <span flex></span>
                                <ma-point-value enable-popup="left" point="p"  style=" font-size: 18px; " ng-style="{'color': p.value >= 60 ? 'green' : p.value >= 35 ? 'yellow' : 'red' }"></ma-point-value>
                            </md-list-item>
            </md-card-content>
            </md-card>
            </div>

I am trying to go to my site viewer page and give the watchlist parameter that points tag. On my menu I have /site-viewer?site

My site viewer page:

    <ma-ui-state-params on-change="designer.parameters.tags.Site = $stateParams.site; stateParams = $stateParams" update-params="updateParams"></ma-ui-state-params>
    <ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="20969fc2-a491-4616-9130-35a2555b37c2" watch-list-xid="SiteQueryWL"></ma-watch-list-get>
    <ma-watch-list-get ng-model="designer.watchList2" parameters="designer.parameters" on-points-change="designer.system = $points" id="20969fc2-a491-4616-9130-35a2555b37c2" watch-list-xid="siteSystem_WL"></ma-watch-list-get>

    <ma-watch-list-parameters id="ac84b0bc-6c9a-4963-8ea4-3ae644855233" ng-model="designer.parameters" watch-list="designer.watchList" ng-change="updateParams = designer.parameters" ></ma-watch-list-parameters>
    <div layout="row" layout-wrap="" layout-align="start stretch">

        <div flex="100" flex-gt-md="33" layout="column" ng-if="designer.points | filter:{deviceName:'Reservoir'}:false | maFirst" ng-repeat="res in designer.points | filter:{name:'Level'}:false">
            <md-card>
                <md-toolbar class="md-whiteframe-1dp md-hue-3">
                    <div class="md-toolbar-tools">
                        <h2 flex="">
                            <span>{{ res.deviceName }} </span>

                        </h2>
                    </div>
                </md-toolbar>
                <md-card-content>
                    <div flex="100" layout="row">
                        <div layout="column" flex="50">

                            <h2> Level:</h2>
                            <ma-point-value style=" font-weight: bolder; font-size: 25px;" enable-popup="right" point="res"></ma-point-value>
                        </div>
                        <div class="flex">
                            <img ng-src="/rest/v2/file-stores/default/img/Reservoir.svg" style="z-index:-2 width: 200px; height: 150px;">
                    
                    </div>
                        </div>
            </md-card-content>
            </md-card>
            </div>
            <div fl

If I manually enter the url with ?site=Beryl for eg it works

but when i click on my button on the overview page i get this in the URL: /ui/mbombela/site-viewer?site=Beryl&site=Beryl
but the site viewer page does not work. it still uses the watchlist default.
Hope i explained correctly

[Jared Wiltshire]

@craigweb I'm going to have to refer you to https://help.infiniteautomation.com/reporting-bugs/

I need version numbers and ideally a reduced example showing the issue clearly. Its hard for me to follow exactly what is going on with your code in particular because you have multiple watchlists. I realize this is a pain but its the quickest way for me to help you.

Quick things that I noticed -

• You should be using <ma-state-params> instead of <ma-ui-state-params>, the ui version is deprecated and will be removed. Sorry this is used on the help page, I will remove this.
• Case matters, i noticed you have used Site and site

edit. Also its worth noting the new attribute on the watch list components, auto-state-params.
You can do something like this if your designer parameter names and the state params (url params) are exactly the same.

<ma-watch-list-get auto-state-params="true">

This will use the url parameters to set the watch list parameters and update the url when you change the watchlist parameters.

[CraigWeb]

@Jared-Wiltshire

<ma-watch-list auto-state-params="true">  

Did the trick, thank you for that. Just one other thing thats got me now. when I put a variable inside a button eg:

<md-button> {{p.deviceName}}</md-button>

it goes to all upper case. not sure if this is supposed to or not ?

[phildunlap]

That sounds like a CSS styling to me. text-transform: uppercase; is on the md-button class in material design's CSS.