UI Script and DOM

[Andrew Pishchul]

I'm trying to test a simple UI Script, but feel kind of lost - it's not working.. The idea is very simple - I want to make "Homepage" menu item under Self-Service red. I know the element id, but script is not working... I even added addLoadEvent function, no success... any ideas?

[Manjul Katare]

Hi Andrew,

I'm not sure if you would be able to target Navigator-Section with UI Script.

For instance if you have below snippet as UI Script:

$j(document).ready(function(){

    $j("li.module-node a#d7ed4257c3332100736abcef81d3ae0b").css("color","red");

    console.log('I did run here .............................................................');

});

You would notice that "console.log" does work which indicates that   script is working well but it could not reach to navigator section and returns an empty [ ] for "li.module-node a". Also if I simply try "$j("li.module-node a#d7ed4257c3332100736abcef81d3ae0b").css("color","red");" from console it does change the text color.

Looks like DOM manipulation on angular based UI pages would be difficult to tweak

Thanks,

Manjul

[twright5]

Right click on Homepage and choose edit module.   You can also get to the right spot by editing the application menu.  

once you find the homepage module, under the link type tab, change link type to HTML ( from Arguments:).

In the arguments section put in your CSS.   Below is some that I added for the link to a knowledge on a sharepoint site:

<style>

#Tom:link {

      color:#000000;

      background-color:transparent;

      text-decoration:none;

}

#Tom:visited {

      color:#000000;

      background-color:transparent;

      text-decoration:none;

}

#Tom:hover {

      color:#0101DF;

      background-color:transparent;

      text-decoration:underline;

}

#Tom:active {

      color:#ff0000;

      background-color:transparent;

      text-decoration:underline;

}

</style>

<a target='_blank' href="http://somesharepointsite/Knowledgebase/Wiki%20Pages/Home.aspx"><img width="16" height="16" align="left" class="nav_sprite" style="background-position: -2788px 0px;" oncontextmenu="return showModuleContext(event, 'fa9712bf0a0a0b0200cd13bd0ae856f4');" src="images/question.gif"><font id='Tom' face='Comic Sans' color='black'> Service Desk Knowledge Base</font></img></a>

Notice I'm changing the styles for the Font tag.   Hope this helps.

Tom

[Andrew Pishchul]

Yes, I'm familiar with that approach, but the idea is to modify DOM in a UI script.

And this doesn't work in Geneva.. unfortunately

[Michael Fry1]

In Scoped app(fuji), SN is not supporting DOM Object   ( document.getElementById() ).

Dom manipulation is strictly restricted in fuji.

Fuji client scripts: document object is null

[Andrew Pishchul]

I know that, but I'm trying to modify DOM in a global UI script (global scope)