# Help required: CSS and context (variable) access

**URL:** <https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654>\
**Category:** General\
**Created:** [22 October 2020 02:52 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654 "2020-10-22T02:52:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2020 02:52 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/1 "2020-10-22T02:52:08Z")

</div>

I have a button which is `CSS` coded to this:

```auto
<div id="regular_x">
   <md-button class="md-button program-names teal"
    data-topic="1"
    data-payload="152">Penn and Teller (Sunday night)
   </md-button>
</div>

<script>

(function($scope) {

$('#regular_x').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": 152});
});
    
})(scope);
</script>

```

Which is good, (but now looking at it is not the best. I'll get back to that soon I hope.)

But the `152` is (now) variable.

How do I make it that the code access either a `flow` or `global` context?

This is another button's code which I saw is different:

```auto
<div id="regular_2">
   <md-button class="md-button program-names teal">Spicks and Specks (Daily)
   </md-button>
</div>

<script>

(function($scope) {

$('#regular_2').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": 152});
});
    
})(scope);
</script>

```

In both I don't need the `<script>` part do I?  
Though I would have to modify the second one to have the line in with the  
`data-payload="152"` line.....

Forgive the dumb question.  
_I've been away from the machine for 2 weeks and the withdrawal is painful._

# Update:

Ok, I was _wrong_ (When aren't I?)

This is the code for the button:

```auto
<div id="regular_x">
   <md-button class="md-button program-names teal">What ever
   </md-button>
</div>

<script>

(function($scope) {

$('#regular_x').on('click', function(e) {
    e.preventDefault(); //prevent default behavior
    $scope.send({"topic":"momentary_regular","payload": 152});
});
    
})(scope);
</script>

```

The `152` needs to be in _context_ and gettable by this code.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 October 2020 03:29 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/2 "2020-10-22T03:29:09Z")

</div>

Unless things have changed, you cant access it directly, you have to send it in as a message

> [@Ui template & global scope](https://discourse.nodered.org/t/ui-template-global-scope/1929):
>
> Hello, I am trying to access the global scope in a ui template (\<script\> var myVar = global.get("MyVariable"); \</script\> ) but that results in a 'global is not defined' error message. Can I access it there and if so, using what syntax? tia!

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2020 03:32 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/3 "2020-10-22T03:32:37Z")

</div>

^&_&(\*&%(_$& Above my skill set.

That is going to make things really difficult then.

I just hope that the assisiations aren't going to change again.  
Just that having one thing to change rather than 30 nodes will make it a lot easier.

Is there a way I could (say) _lookup_ the name?

So, the node as is, sends the _name_ (say `abc`) and it goes through another node that searches the `flow` context and if a match is found, returns the value?

Something along the line of the `vlookup()` command in spreadsheets.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2020 03:49 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/4 "2020-10-22T03:49:39Z")

</div>

(Sorry)

So expanding on what I just said:

This is the flow - as an example.

```auto
[{"id":"1dd69628.a44192","type":"change","z":"88de1ac2.8b8c38","name":"ALL channels used (name/number) *","rules":[{"t":"set","p":"nine","pt":"flow","to":"100","tot":"num"},{"t":"set","p":"fox1","pt":"flow","to":"101","tot":"num"},{"t":"set","p":"abc","pt":"flow","to":"102","tot":"num"},{"t":"set","p":"sbs","pt":"flow","to":"104","tot":"num"},{"t":"set","p":"uktv","pt":"flow","to":"105","tot":"num"},{"t":"set","p":"seven","pt":"flow","to":"107","tot":"num"},{"t":"set","p":"fox8","pt":"flow","to":"108","tot":"num"},{"t":"set","p":"ten","pt":"flow","to":"110","tot":"num"},{"t":"set","p":"showcase","pt":"flow","to":"112","tot":"num"},{"t":"set","p":"sifi","pt":"flow","to":"116","tot":"num"},{"t":"set","p":"classic","pt":"flow","to":"117","tot":"num"},{"t":"set","p":"bbcfirst","pt":"flow","to":"119","tot":"num"},{"t":"set","p":"universal","pt":"flow","to":"120","tot":"num"},{"t":"set","p":"history","pt":"flow","to":"130","tot":"num"},{"t":"set","p":"discovery","pt":"flow","to":"133","tot":"num"},{"t":"set","p":"natgeo","pt":"flow","to":"139","tot":"num"},{"t":"set","p":"boxsets","pt":"flow","to":"150","tot":"str"},{"t":"set","p":"abccomedy","pt":"flow","to":"152","tot":"num"},{"t":"set","p":"seven2","pt":"flow","to":"156","tot":"num"},{"t":"set","p":"sevenmate","pt":"flow","to":"157","tot":"num"},{"t":"set","p":"sevenflix","pt":"flow","to":"158","tot":"num"},{"t":"set","p":"ninego","pt":"flow","to":"162","tot":"num"},{"t":"set","p":"ninegem","pt":"flow","to":"164","tot":"num"},{"t":"set","p":"viceland","pt":"flow","to":"170","tot":"num"},{"t":"set","p":"fox1-plus2","pt":"flow","to":"201","tot":"num"},{"t":"set","p":"uktv-plus2","pt":"flow","to":"205","tot":"num"},{"t":"set","p":"fox8-plus2","pt":"flow","to":"208","tot":"num"},{"t":"set","p":"showcase-plus2","pt":"flow","to":"212","tot":"num"},{"t":"set","p":"sifi-plus2","pt":"flow","to":"216","tot":"num"},{"t":"set","p":"classic-plus2","pt":"flow","to":"217","tot":"num"},{"t":"set","p":"discovery-plus2","pt":"flow","to":"233","tot":"num"},{"t":"set","p":"natgeo-plus2","pt":"flow","to":"239","tot":"num"},{"t":"set","p":"viceland-hd","pt":"flow","to":"270","tot":"num"},{"t":"set","p":"worldmovies","pt":"flow","to":"433","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":110,"wires":[[]],"info":"All names are written in lower case.\nChannels like `72` are written as `seven2`\nFox8 are written as `fox8`\nAll `+2` channels are appended with `-plus2`"},{"id":"3b806e2e.f235fa","type":"inject","z":"88de1ac2.8b8c38","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":110,"wires":[["1dd69628.a44192"]]},{"id":"cf0cd74b.0b68","type":"ui_template","z":"88de1ac2.8b8c38","group":"f1fdb5d4.16549","name":"Blank","order":11,"width":"7","height":1,"format":"<div id=\"regular_x\">\n <md-button class=\"md-button program-names teal\">BLANK\n </md-button>\n</div>\n\n<script>\n\n(function($scope) {\n\n$('#regular_x').on('click', function(e) {\n e.preventDefault(); //prevent default behavior\n $scope.send({\"topic\":\"momentary_regular\",\"payload\": \"abccomedy\"});\n});\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":330,"y":180,"wires":[["78bf5335.6271f4","945485eb.0bd93"]]},{"id":"78bf5335.6271f4","type":"function","z":"88de1ac2.8b8c38","name":"Magic node","func":"\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":180,"wires":[["39cbf291.a66396"]]},{"id":"945485eb.0bd93","type":"debug","z":"88de1ac2.8b8c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":440,"y":230,"wires":[]},{"id":"39cbf291.a66396","type":"debug","z":"88de1ac2.8b8c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":710,"y":180,"wires":[]},{"id":"f1fdb5d4.16549","type":"ui_group","z":"","name":"Programs","tab":"cead8e37.ba09a","order":1,"disp":true,"width":"8","collapse":false},{"id":"cead8e37.ba09a","type":"ui_tab","z":"","name":"Schedule","icon":"dashboard","order":10,"disabled":false,"hidden":false}]

```

The button is pressed and `abccomedy` is sent to the _magic node_ and it finds the association between `abccomedy` and `152` then spits out the `152` value.

Maybe it would/could be easier if the list was an array. Again: this is just to show the idea.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 October 2020 04:56 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/5 "2020-10-22T04:56:03Z")

</div>

If that is what would work for you, to pick up the value of "abccomedy" outside of the ui\_template when you press the button, you could do like that. You could have such variables in a context object if it makes life easier or you could simply access them individually

But if you need the values already inside the ui\_template, like if you want the appearance of the ui to change depending on the values, you have to send them into the ui\_template code. You can imagine you would send all such context variables you need in a ui\_template when they change, so the ui\_template code "always know their state". If you then press the button, it would have access to the "latest". If this hasn't change since that topic was written back in 2018

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2020 05:12 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/6 "2020-10-22T05:12:45Z")

</div>

No, I am thinking of options.

As is, the node sends `152` for (say) `abccomedy`.

But the channel associations have changed.

So, my thoughts are that rather than sending the actual number of the channel, I send the name.

That then gets sent through a _lookup()_ to find the actual channel number.

Having them in context is an option. I guess I could have them in a file and search the file, but that would require more file I/O and I am not sure that is really needed.

I have no idea of how to do the _lookup()_ in javascript. (Yeah: search/study/learn.)

Just now I am at 300% load, and this will be on going until the other task is completed.  
Alas life goes on in the mean time and I am wanting help in how do do this part.

This way the nodes don't need to be changed. It is still _channel x_ and if/when it gets changed again, all I have to do is edit the association table and the number gets sent when the name is sent into the _magic node_.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 December 2020 05:12 UTC](https://discourse.nodered.org/t/help-required-css-and-context-variable-access/34654/7 "2020-12-21T05:12:47Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.