Widget

[abjaffrey]

Hi,

i have a requirement to poplate a table of data of assets assigned with yes/no box.

i have written a widget script to populate, however the both the yes and no are getting clicked simultaneously, i only want either yes or no to be selected,

HTML:

<input type="checkbox" name="yes" id="yes" value="Ja" ng-click="c.setAction(item)">

<input type="checkbox" name="no" id="no" value="Nej" ng-click="c.setnoAction(item)">

client:

c.setAction = function(item) {

        item.yes_no = 'Yes';

        document.getElementById("no").checked = false;

        $('#' + item.asset).slideUp(400);

        g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));

    };

c.setnoAction = function(item) {

        item.yes_no = 'No';

        item.notes = '';

        document.getElementById("yes").checked = false;

        $('#' + item.asset).slideDown(400);

        g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));

    };

[Ankur Bawiskar]

@abjaffrey 

try to enhance it further

[Ankur Bawiskar]

@abjaffrey 

I simply updated or provided the logic for the widget details you shared and I am able to select either Yes or No

you need to enhance it further if you are adding multiple rows

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Ankur Bawiskar]

@abjaffrey 

If you still prefer to use checkboxes, you can add logic to ensure only one checkbox is selected at a time:

HTML:

<input type="checkbox" name="yes" id="yes" value="Ja" ng-click="c.setAction(item)">
<label for="yes">Yes</label>

<input type="checkbox" name="no" id="no" value="Nej" ng-click="c.setnoAction(item)">
<label for="no">No</label>

Client Script:

c.setAction = function(item) {
    if (document.getElementById("yes").checked) {
        item.yes_no = 'Yes';
        document.getElementById("no").checked = false;
        $('#' + item.asset).slideUp(400);
        g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));
    } else {
        item.yes_no = '';
    }
};

c.setnoAction = function(item) {
    if (document.getElementById("no").checked) {
        item.yes_no = 'No';
        item.notes = '';
        document.getElementById("yes").checked = false;
        $('#' + item.asset).slideDown(400);
        g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));
    } else {
        item.yes_no = '';
    }
};

If my response helped please mark it correct and close the thread so that it benefits future readers.

[Runjay Patel]

Hi @abjaffrey ,

Why not radio button like below.

<input type="radio" name="yes_no_{{item.asset}}" id="yes_{{item.asset}}" value="Yes" ng-click="c.setAction(item)">
<input type="radio" name="yes_no_{{item.asset}}" id="no_{{item.asset}}" value="No" ng-click="c.setnoAction(item)">

-------------------------------------------------------------------------

If you found my response helpful, please consider selecting "Accept as Solution" and marking it as "Helpful." This not only supports me but also benefits the community.

Regards
Runjay Patel - ServiceNow Solution Architect
YouTube: https://www.youtube.com/@RunjayP
LinkedIn: https://www.linkedin.com/in/runjay

-------------------------------------------------------------------------

[Juhi Poddar]

Hello @abjaffrey 

Try this

HTML:

<div>
    <input type="radio" name="response_{{item.asset}}" id="yes_{{item.asset}}" value="Yes" ng-click="c.setAction(item)">
    <label for="yes_{{item.asset}}">Yes</label>

    <input type="radio" name="response_{{item.asset}}" id="no_{{item.asset}}" value="No" ng-click="c.setnoAction(item)">
    <label for="no_{{item.asset}}">No</label>
</div>

 Client Script:

c.setAction = function(item) {
    item.yes_no = 'Yes';
    $('#' + 'yes_' + item.asset).slideUp(400); // Slide up animation
    g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));
};

c.setnoAction = function(item) {
    item.yes_no = 'No';
    item.notes = ''; // Reset notes if "No" is selected
    $('#' + 'no_' + item.asset).slideDown(400); // Slide down animation
    g_form.setValue('personlige_assets', JSON.stringify(c.data.assets));
};

Hope this helps!

"If you found my answer helpful, please like and mark it as an "accepted solution". It helps future readers to locate the solution easily and supports the community!"

Thank You
Juhi Poddar