Retrieve Selected Item in a modal dialog and also enable or disable the modal dailog

Question

I have a dialog open in an HTML Client application. The dialog updates an entity(WorkflowMessages). It has three controls: a drop down control,  and a text area and a modal dialog.

The  drop down control has a list of options: 0: No action, 1: Approve, 2: Decline, 3: Redirect to.

The modal dialog opens up a database list of employees with their names.

I want to be able to:

1. Enable or disable the modal dialog  based on the user selection in the drop down. i.e. if the user selects redirect to, the employee modal dialog should be enabled otherwise disabled.

2. For the update, I want to be able retrieve the employee selected by the user and use it to update a field in the entity. 

Thanks.

---

Tobi Akinseye

Answer 1

Hello toBbie,

I have a question before suggesting an answer: How is the modal dialog launched? Is there a button that when clicked displays the dialog?

In general, one solution is to hide the control that displays the modal dialog for employees depending on the state of the dropdown. I would attach a changeListener to your dropdown control which in turn sets the .isVisible property of the control that displays the modal dialog.

There is a great article from Stephen Provine on the HTML Client API's that shows how to create a changeListener.

You could put something like this in the 'created' function of your screen:

// Create Listener for the field that must be monitored
screen.entityName.addChangeListener("FieldName",function () {
    // When the "FieldName" changes, set the visibility of the button
    if (screen.entityName.FieldName == "Redirect to") {
        // Show the button
        screen.findContentItem("Button").isVisible = true;
    }
    else {
        // Hide the button
        screen.findContentItem("Button").isVisible = false;

    };
});

I hope this helps

---

-Christopher DeMars

Answer 2

Hi Chris,

The code works, many thanks.  However, my second question has not been answered.

When the modal dialog is visible, the user clicks it to select an employee from the list. I want to be able to retireve the employee selected by the user in order to update the redirect_to field in the cm_workflow_messages entity.

here is my code:

//This works
myapp.EditWflMessages.created = function (screen) {
    // Write code here.
    screen.cm_workflow_message.addChangeListener("msg_status", function () {

        if (screen.cm_workflow_message.msg_status == 3) {
            screen.findContentItem("Employees").isVisible =true;
        }
        else {
            screen.findContentItem("Employees").isVisible = false;

        };
    });

    
};

//Second question
myapp.EditWflMessages.save = function (screen) {
    // Write code here.
    if (screen.findContentItem("Employees").isVisible == true)
    {
        screen.cm_workflow_message.redirect_to = screen.findContentItem("Employees").value
   }
};

---

Tobi Akinseye

Answer 3

Tobi,

The selected employee is accessible through the employee entity rather than the contentItem. The contentItem is on the View side and you should be accessing the Data side.

In order to display a list of employees, you must have a table of employees in your data workspace, and you have added this data item to your screen.

Lets say for example that you have called the table "Employees" and there is a "Employee_Name" field in that table. You would use the following code:

screen.cm_workflow_message.redirect_to = screen.Employees.Employee_Name;

I'm not sure if you need to use screen.Employees.selecedItem.Employee_Name or not... It all depends on how your relationships are setup on the data side and what kind of data item you added to the screen.

Of course, I'm making some assumptions about your entities... Let me know if this works.

---

-Christopher DeMars

Answer 4

Hi Chris,

I added the following code in the save event of the screen, but the redirect_to field was not updated. I put a breakpoint in the code so I could step through it, but it seems the code in the save event never gets called when i click the save button on the screen.

I also tried the screen.Employees.selectedItem.employee_surname and got the same results.

The Employees were added as a dataItem to the screen from the employee table.

myapp.EditWflMessages.save = function (screen) {
    // Write code here.
   screen.cm_workflow_message.redirect_to = screen.Employees.employee_name;
     
};

---

Tobi Akinseye

Answer 5

Tobi,

Per Robert Schoen in this forum thread, the "save" menu item under write code should not have made it into the prrview because it is not implemented, which is why your code is never getting called.

Rather than waiting for the field to be set upon a save, you can try just setting the field when aan employee gets picked.

In other words, create another addChangeListener on the employee field that sets the redirect_to field on the cm_workflow_message.

See if that approach works for you.

---

-Christopher DeMars

Answer 6

I tried this but i did not get any update on the redirect field

myapp.EditWflMessages.created = function (screen) {
    // Write code here.
    screen.cm_workflow_message.addChangeListener("msg_status", function () {

        if (screen.cm_workflow_message.msg_status == 3) {
            screen.findContentItem("Employees").isVisible = true;

            screen.Employees.addChangeListener("Employees", function () {


                screen.cm_workflow_message.redirect_to = screen.Employees.selectedItem.employee_surname;
                screen.cm_workflow_message.redirect_to = "henry";
                var item = screen.Employees.employee_surname;

            });

        }
        else {
            screen.findContentItem("Employees").isVisible = false;

        }; 
    });
    
};

Also here are my screen shots

---

Tobi Akinseye

Answer 7

Tobi,

I see you tried to add a changeListener from within another changeListener, which is why this would not work. Everytime your msg_status field changes it is trying to create another new changeListener on the Employee.

Try doing something like this instead:

myapp.EditWflMessages.created = function (screen) {
    // Write code here.
    screen.Employees.addChangeListener("Employees", function () {
        screen.cm_workflow_message.redirect_to = screen.Employees.selectedItem.employee_surname;
        alert(screen.Employees.employee_surname);
    });

    screen.cm_workflow_message.addChangeListener("msg_status", function () {

        if (screen.cm_workflow_message.msg_status == 3) {
            screen.findContentItem("Employees").isVisible = true;
        }
        else {
            screen.findContentItem("Employees").isVisible = false;

        }; 
    });
};

---

-Christopher DeMars

Answer 8

Thanks Chris,

After typing the code, I get this error.

---

Tobi Akinseye

Answer 9

This is getting beyond my abilities now...

The issue most likely has to do with what we are trying to attach the changeListener to. I know that typically, the listener is attached to a field or HTML element such as a textbox.

In my last answer I just rearranged your code, and you were trying to attach the listener to a list and not a field. Looking at your pictures above I can see that the Status and Comments are field in the cm_workflow_message screen entity. However, "Employees" is not a field but a Details Modal Dialog which displays a list of items (with each item showing those 3 Employees fields).

So I get that a changeListener cannot be attached to a modal dialog which is causing your error. I'm not sure how to add a changeListener to a modal dialog item or even if you can.

If you cannot, then you will have to go back to trying to figure out how to assign the redirect_to when the user saves the item. After having read many of the posts in this forum, it looks like you will have to create your own "Save" button and do the assignment in the button execute code as well as calling the saveChanges() method. See this thread for an example.

---

-Christopher DeMars