Skip to main content
Kinetic Community

How to use JS instead of Events

There can be cases where managing a set of events gets unwieldy. In this example, there are a series of events that are necessary to insert/remove, require/make optional, set read only/read-write, and set fields internal for a combination of two radio buttons. That would be 48 events or one javascript function and two events.

Usage

In this example, there are a series of events that are necessary to insert/remove, require/make optional, set read only/read-write, and set fields internal for a combination of two radio buttons. That would be 24 events (4 event types for 3 request types and 2 PC Types, so 4*3*2) on each of the two questions: 48 events total. Or you can do the same thing with one javascript function and two events. 

All of the same functionality of events is also available in javascript calls that can be used in the Custom Header Content of the service item. In this example we will be using the following KD.utils.Action methods:

setReadOnly

setReadWrite

insertElement

removeElement

getQuestionValue

setQuestionValue

makeQuestionOptional

makeQuestionRequired

These are used to have the same effect the "Read Only and Read Write", "Required and Optional", "Insert and Remove", and "Set Fields - Internal" events would.

Example

The attached example service item has two radio button questions that control which items in the second section display/are required/are automatically selected.

JS Event Service Catalog Console.png

An example of what the customer might see:

JS Events Front End.png

But the display is actually slightly different for each combination of Request Type and PC type. Instead of a multitude of events on these two questions, there is one event on each. Both of these events are exactly the same:

JS Event Click Event.png

It is the handlePCChoice() function that does the work of all those events.

function handlePCChoice() {
    //get the two questions necessary to determine the appropriate actions
    var orderType = KD.utils.Action.getQuestionValue('Request Type');
    var pcType = KD.utils.Action.getQuestionValue('PC Type');
   
    if (orderType != "" && pcType != "") {
    //If both request and PC type are indicated, show details
        KD.utils.Action.insertElement('PC Order Details Section');
    }
   
    if (orderType == "New" && pcType == "Desktop")
    { /* For a New Desktop:
         require monitor,
         automatically select (check and read only) mouse and keyboard,
         remove from view the laptop items (laptop type, aircard, and carry case),
         make optional laptop type (since it's being removed),
         hide repair text note (not needed for a New request type)
        */
        KD.utils.Action.setQuestionValue('Keyboard', 'Keyboard');
        KD.utils.Action.setQuestionValue('Mouse', 'Mouse');
        KD.utils.Action.setReadOnly('Mouse');
        KD.utils.Action.setReadOnly('Keyboard');
        KD.utils.Action.makeQuestionOptional('Laptop Type');
        KD.utils.Action.makeQuestionRequired('Monitor');
        KD.utils.Action.removeElement('Laptop Type');
        KD.utils.Action.removeElement('Carry Case');
        KD.utils.Action.removeElement('Aircard');
        KD.utils.Action.removeElement('Repair Text');
    }
    if (orderType == "New" && pcType == "Laptop")
    { /* For a New Laptop:
         make monitor optional,
         un-check and read-write mouse and keyboard (necessary because
         another option selects and makes this field read-only),
         insert laptop items (laptop type, aircard, and carry case),
         require Laptop type,
         hide repair text note (not needed for a New request type)
        */
        KD.utils.Action.setQuestionValue('Keyboard', null);
        KD.utils.Action.setQuestionValue('Mouse', null);
        KD.utils.Action.setReadWrite('Mouse');
        KD.utils.Action.setReadWrite('Keyboard');
        KD.utils.Action.makeQuestionRequired('Laptop Type');
        KD.utils.Action.makeQuestionOptional('Monitor');
        KD.utils.Action.insertElement('Laptop Type');
        KD.utils.Action.insertElement('Carry Case');
        KD.utils.Action.insertElement('Aircard');
        KD.utils.Action.removeElement('Repair Text');
    }
    if (orderType == "Update" && pcType == "Desktop")
    { /* For Repair/Replace Desktop:
         make monitor optional (may not need replacement),
         un-check and read-write mouse and keyboard (may not need replacement),
         remove laptop items (laptop type, Aircard, and carry case),
         make optional Laptop type (since it's being removed), 
         show repair text note
        */
        KD.utils.Action.setQuestionValue('Keyboard', null);
        KD.utils.Action.setQuestionValue('Mouse', null);
        KD.utils.Action.setReadWrite('Mouse');
        KD.utils.Action.setReadWrite('Keyboard');
        KD.utils.Action.makeQuestionOptional('Laptop Type');
        KD.utils.Action.makeQuestionOptional('Monitor');
        KD.utils.Action.removeElement('Laptop Type');
        KD.utils.Action.removeElement('Carry Case');
        KD.utils.Action.removeElement('Aircard');
        KD.utils.Action.insertElement('Repair Text');
    }
    if (orderType == "Update" && pcType == "Laptop")
    { /* For Repair/Replace Laptop:
         monitor optional (may or may not have/need replacement),
         un-check and read-write mouse and keyboard (may or may not have/need replacement),
         insert laptop items (laptop type, aircard, and carry case),
         make optional Laptop type (it may be accessories that need repair/replacement),
         show repair text note
        */
        KD.utils.Action.setQuestionValue('Keyboard', null);
        KD.utils.Action.setQuestionValue('Mouse', null);
        KD.utils.Action.setReadWrite('Mouse');
        KD.utils.Action.setReadWrite('Keyboard');
        KD.utils.Action.makeQuestionOptional('Laptop Type');
        KD.utils.Action.makeQuestionOptional('Monitor');
        KD.utils.Action.insertElement('Laptop Type');
        KD.utils.Action.insertElement('Carry Case');
        KD.utils.Action.insertElement('Aircard');
        KD.utils.Action.insertElement('Repair Text');
    }
    if (orderType == "Return" && pcType == "Desktop")
    { /* For Return Desktop:
         require monitor (they must return this),
         check but read-write mouse and keyboard (they are
         supposed to return these-but it can be left for replacement),
         remove laptop items (laptop type, aircard, and carry case), 
         make optional Laptop type (since it's being removed),
         hide repair text note
        */
        KD.utils.Action.setQuestionValue('Keyboard', 'Keyboard');
        KD.utils.Action.setQuestionValue('Mouse', 'Mouse');
        KD.utils.Action.setReadWrite('Mouse');
        KD.utils.Action.setReadWrite('Keyboard');
        KD.utils.Action.makeQuestionOptional('Laptop Type');
        KD.utils.Action.makeQuestionRequired('Monitor');
        KD.utils.Action.removeElement('Laptop Type');
        KD.utils.Action.removeElement('Carry Case');
        KD.utils.Action.removeElement('Aircard');
        KD.utils.Action.removeElement('Repair Text');
    }
    if (orderType == "Return" && pcType == "Laptop")
    { /* For Return Laptop:
         monitor optional (they may not have one),
         un-check and read-write mouse and keyboard,
         show laptop type, aircard, and carry case,
         make Laptop type required,
         hide repair text note
        */
        KD.utils.Action.setQuestionValue('Keyboard', null);
        KD.utils.Action.setQuestionValue('Mouse', null);
        KD.utils.Action.setReadWrite('Mouse');
        KD.utils.Action.setReadWrite('Keyboard');
        KD.utils.Action.makeQuestionRequired('Laptop Type');
        KD.utils.Action.makeQuestionOptional('Monitor');
        KD.utils.Action.insertElement('Laptop Type');
        KD.utils.Action.insertElement('Carry Case');
        KD.utils.Action.insertElement('Aircard');
        KD.utils.Action.removeElement('Repair Text');
    }
}

...