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

Marius_Dobrzani

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

Shane_White

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

Shane_White

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_Dobrzani

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_White

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_Dobrzani

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_White

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_Dobrzani

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_White

You are more than welcome! Glad I could help!

Thanks,

Shane