Home CMDB Portal

How to add an event to a dropdown list with enum?

Marius_DobrzaniMarius_Dobrzani Customer IT Monkey ✭

Hello,


in our custom form field, we have the following dropdown list:


The enum is defined like this:


{

DataType: "Enum", PropertyDisplayName: "Art", PropertyName: "Art", EnumId: 'e04bc28e-6f26-3156-abeb-e0fb53d014d6'

}


The list itself works properly, but currently I am not able to add any events to it. The end goal is to change or rather add text to the "ID" field based on the selection from the dropdown list.

For example, if I try to add an event to the "ID" field (or any other textfield on that page) I can do this:


app.custom.formTasks.add('FFM.Class.Zugangsobjekt',null, function(formObj, viewModel){

    $(document).ready(function() {

        if(jsonViewModel.ClassTypeId == '7c9a4968-0c02-3611-70ff-0e6d3dc520fe') {           

            $('[name="ID"]').on("mouseover", function(){

                alert("test"); // Works


This works fine, but when I try to do the same with the enum field, it does not work:


app.custom.formTasks.add('FFM.Class.Zugangsobjekt',null, function(formObj, viewModel){

    $(document).ready(function() {

        if(jsonViewModel.ClassTypeId == '7c9a4968-0c02-3611-70ff-0e6d3dc520fe') {           

            $('[name="Art"]').on("mouseover", function(){

                alert("test"); // Does not work


How can I add an event to the list (or, to start with, target/reference the enum at all)?

Any help will be appreciated!


Best regards,


Marius

Best Answer

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
    Answer ✓

    Hi @Marius_Dobrzani

    When do you want the event to fire? When a different selection is made from the dropdown?

    What about a click event?

    Thanks,

    Shane

Answers

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    Hi @Marius_Dobrzani

    If you right click on the "Art" field, and click inspect can you show me what you see? For example the Title field shows this:

    Thanks,

    Shane

  • Marius_DobrzaniMarius_Dobrzani Customer IT Monkey ✭

    Hi Shane,


    no problem, the "Art" field shows the following:



    Using Developer Tools, I noticed that I was missing a crucial part:

    Since an enum is an object in the viewmodel, I can only reference a property of it. A very similar probplem was already solved here: https://community.cireson.com/discussion/1546/target-enum-list-values-in-portal-js


    Now, it is possible for me to add some events to this field.

    For example, I can do the following:


    app.custom.formTasks.add('FFM.Class.Zugangsobjekt',null, function(formObj, viewModel){

        $(document).ready(function() {

            if(jsonViewModel.ClassTypeId == '7c9a4968-0c02-3611-70ff-0e6d3dc520fe') {     


                var idnumber = $('[name="ID"]').val();

                var artname = pageForm.viewModel.Art.Name;

                var abbreveation;


                switch(artname) {

                    case "AZEOnline":

                        abbreveation = "AZ";

                        break;

                    case "elektrischer Schließzylinder":

                        abbreveation = "EZ";

                        break;

                    case "Schlüsseltresor":

                        abbreveation = "ST";

                        break;

                    default:

                        abbreveation = "";

                }


                    $('[name="ID"]').val(abbreveation + " " + idnumber);


    Output:



    However, I still cannot add a change event to the enum, the selector $('[name="Art"]') does not work.


    Marius

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    Hi @Marius_Dobrzani

    Looking at the screenshot you provided, if you compare it with the one I sent; where it says <input type etc, the title field has name=title, if you notice on your element, that does not exist, you do not have name=art.

    So you'd have to target something else. Maybe this might work: $('[data-role="Art"]')

    Thanks,

    Shane

  • Marius_DobrzaniMarius_Dobrzani Customer IT Monkey ✭
    edited January 2020

    Hi Shane,


    thanks for the tip! You´re right, I could not traget the name. However, the selector $('[data-role="Art"]') does work, unfortunately only for certain events.


    So, this works now:

    $('[data-role="Art"]').on("mouseover", function(){

    alert("test");})


    But this does not:

    $('[data-role="Art"]').on("change", function(){

    alert("test");})


    Edit: Technically, the second example works, but not the way I want it to. The event fires when I change the text in the field (so when I click inside the field and change it manually), but when I change it with the dropdown selection, it does not fire.

    Marius

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
    Answer ✓

    Hi @Marius_Dobrzani

    When do you want the event to fire? When a different selection is made from the dropdown?

    What about a click event?

    Thanks,

    Shane

  • Marius_DobrzaniMarius_Dobrzani Customer IT Monkey ✭

    Hi Shane,


    that's it! Yes, I want the event to fire when a selection is made from the dropdown. I just testet it using a click event and it works!


    Now I can use(which works like I want it to):

    $('[data-role="Art"]').on("click", function(){

    //rest of the code

    })


    Thank you very much!


    Marius

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    You are more than welcome! Glad I could help!

    Thanks,

    Shane

Sign In or Register to comment.