List_BulkSelect Title Propriety

  

hi,


im using the List_BulkSelect rich widget and I see that I cant apply any style directly to it or advanced proprieties.


I would like to change the title that it shows when I mouse hover it. 


Do I have to implement a javascript to do it? and If so how can I call it? 


Appreciate it in advance,

Vincent Colpa

Hi Vincent.

You can simply overwrite the CSS classes you need to change if that behavior is to be applied on all your application. 

If not, you can use a jQuery selector by class to get the elements and apply the css() selector to those elements, setting the CSS attributes to it.

Thanks for the reply, I tried to add the following JavaScript to the JavaScript function of the screen in question beeing "ListBulkSelect" the name of the RichWidget im using


document.getElementById('" + ListBulkSelect.Id + "').title = 'test';


this is the result im getting with is the same default title:

what am I doing wrong?


Thanks once again,

Vincent Colpa

Hi Vincent.

Sorry but the first time I didn't understand well what you pretended to do.

To do what you need, you can simply use this script:


$( document ).ready(function() {
    $('#"+ListBulkElem.Id+" > input').attr('title', '<Your new title>');
});

Let me know if it worked for your needs.

Cheers,

GM

Hey Gonçalo Martins,


sorry for taking so long to answer,

now I am able to check this out again, as I can see ( if I am not wrong ) you are giving me a JQuery solution, is it possible to make this without using JQuery? I google it and found out this method:


-----------

document.addEventListener("DOMContentLoaded", function(event) {
   $('" + ListBulkElem.Id + "').attr('title', 'bora la');
});

-----------


Im getting an error and I guess its because the way im calling the element ( not calling it the correct way )


Thanks a lot for the answers,

Vincent Colpa



Hi Vicent.

The option you posted is also using jQuery on your selector.

Btw, why don't you want to use jQuery? It's much simpler.

But of course, you can do that only with javascript.

Instead of having $('" + ListBulkElem.Id + "').attr('title', 'bora la'); you can use something like this (didn't test it):

document.getElementById('" + ListBulkElem.Id + "').setAttribute('title', '<your custom title>');


Cheers,

GM

Hey GM,

I dont really know, I just have the kind of feeling that loading a full library would make my app much heavier, am I thinking wrong?

What kind of approach should I have when I have to use this kind of scripts? Simply load the JQuery and use it since its much easier?

BTW, i know that normally I import the JQuery directly in a html page calling the library, how can I do it in my OS project?


Thanks a lot for answering btw,

Vincent Colpa

BTW,

sorry for insisting on this cause I know it is something doable and for sure Im not beeing able to do it because Im not calling the element in the correct way im using the following code in the JS of the webscreen

SyntaxEditor Code Snippet

document.getElementById('" + ListBulkElem.Id + "').setAttribute('title', 'my title');


still getting null reference as If im not calling the ID the correct way.. my element name is "ListBulkElem"


thanks once again

Vincent Colpa

Solution

Hi again.

You always have the jQuery available on your pages. If you were using P10 mobile I would say you should use javascript for sure!

But if you prefer to use Javascript you can do this:

document.addEventListener('DOMContentLoaded', function(event) {     document.getElementById('" + ListBulkElemSelectAll.Id + "').getElementsByTagName('INPUT')[0].setAttribute('title', '<your custom title>'); });


Solution
Processing Upload...

Hi again,

thanks for the reply GM,

to use this kind of JS that is interacting with page elements can I use the Javascript editor of the webscreen where the ListBulkElem is ?

Just because I am getting "Wrong/Null reference" everytime... 

Im not sure if that is the problem, maybe I have to add a JavaScript Tag using an action in the preparation or not?


I atached my .oml in case you want to take a look.

Thanks a lot for the patience,


Vincent Colpa

Hi Vicent.

You should use the code inside the page on a script block (expression or simply use the js web block from Silk UI).


Hi Vincent.

I can't see the oml. It seems that your upload failed.

However, with the code snippet, I posted previously, you should be able to do what you need.

Let me know if you have any further issues.

Hey Gonçalo,

finally I was able to do it, after spending many hours checking it out and testing it using google chrome's awesome inspector.

I guess there is a small "bug" I don't know if we can call it that. Lets see

When I use the following Javascript to obtain the element I want:

SyntaxEditor Code Snippet

"<script>$('" + BulkList.Id + "').setAttribute('title', 'FINALLY');</script>"

in runtime he assumes that I want the ID of the <span> which is enclosing the input


So i tried completing the name of the element doing this:

SyntaxEditor Code Snippet

"<script>$('" + BulkList.Id + "_wtchkSelectAll" + "').setAttribute('title', 'FINALLY');</script>"

is that suppose to happen?

anyways now it is working

Gonçalo Martins thank you so much for helping me it was getting hard to make it work


Thanks once again,

Vincent Colpa

Hi Vincent.

What was the problem you had when implementing the code I just gave you? I just tested it and it works well.

And please, don't put that as hard coded because something changes on the platform version, that will stop working.

And, if you look closer, you can check that the BulkList.Id will give you the runtime identifier of the web block but the element you really need to change the title attribute is the check box, so you need to get the child node that is an input so, the code should look like I told you before:

document.addEventListener('DOMContentLoaded', function(event) {     document.getElementById('" + ListBulkElemSelectAll.Id + "').getElementsByTagName('INPUT')[0].setAttribute('title', '<your custom title>'); });

Hey once again, I believe you are a bit tired of me,


Gonçalo you are totally right, it would be the child node, my mistake,

I used your JS and its totally working now,


Thanks once again,

Vincent Colpa

No problem Vicent.

Glad to know I could help