Show all active training list in Variable

[aishwaryade3564]

Hello

I have created 'Training Request Catalog' catalog were I want to create one variable 'List of trainings' it will Show all active training requests raised by ‘Requested for’ user in the table format. That table should contain Number, Training, Requested for & State fields from table "Training Request"

1)I have created UI macro and script include but not working

2) which variable type should select ? how to achive this

[Bhavya11]

Hi @aishwaryade3564 ,

Please try below:

Body HTML

<div ng-if="data.trainingRequests.length > 0">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Number </th>
                <th>Training </th>
                <th>Requested for</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="request in data.trainingRequests">
                <td>{{ request.number }}</td>
                <td>{{ request.training }}</td>
                <td>{{ request.requested_for }}</td>
                <td>{{ request.state }}</td>
            </tr>
        </tbody>
    </table>
</div>
<div ng-if="data.trainingRequests.length === 0">
    No active training requests found.
</div>

Server: 

(function() {
    data.trainingRequests = [];
    var userId = gs.getUserID();
    var gr = new GlideRecord('u_training_request');
    gr.addQuery('u_requested_for', userId);
    gr.query();
    while (gr.next()) {
        data.trainingRequests.push({
            number: gr.getValue('number'),
            training: gr.getValue('short_description'),
            requested_for: gr.getDisplayValue('u_requested_for'),
            state: gr.getDisplayValue('state')
        });
    }
})();

CSS:

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.table th {
    background-color: #f2f2f2;
    text-align: left;
}

.table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table tr:hover {
    background-color: #ddd;
}

Script include :

var TrainingRequestAjax = Class.create();
TrainingRequestAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {

  getActiveTrainingRequests: function() {
	var requestedFor = this.getParameter('sysparm_user_id');
        var result = [];
        var gr = new GlideRecord('u_training_request');
        gr.addQuery('u_requested_for', gs.getUserID());
        gr.query();
        while (gr.next()) {
            result.push({
                number: gr.getValue('number'),
                training: gr.getValue('short_description'),
                requested_for: gr.getDisplayValue('u_requested_for'),
                state: gr.getDisplayValue('state')
            });
        }
        return JSON.stringify(result);
    },
});

 Output:

Please mark helpful & correct answer if it's really worthy for you.

Thanks,

BK

[aishwaryade3564]

HI @Bhavya11 

Where to write Script include and where to call it

[Bhavya11]

hi @aishwaryade3564 ,

sorry no need to of script include. you can just use the Widget html, server side script

Html

<div ng-if="data.trainingRequests.length > 0">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Number </th>
                <th>Training </th>
                <th>Requested for</th>
                <th>State</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="request in data.trainingRequests">
                <td>{{ request.number }}</td>
                <td>{{ request.training }}</td>
                <td>{{ request.requested_for }}</td>
                <td>{{ request.state }}</td>
            </tr>
        </tbody>
    </table>
</div>
<div ng-if="data.trainingRequests.length === 0">
    No active training requests found.
</div>

Server:

(function() {
    data.trainingRequests = [];
    var userId = gs.getUserID();
    var gr = new GlideRecord('u_training_request');
    gr.addQuery('u_requested_for', userId);
    gr.query();
    while (gr.next()) {
        data.trainingRequests.push({
            number: gr.getValue('number'),
            training: gr.getValue('short_description'),
            requested_for: gr.getDisplayValue('u_requested_for'),
            state: gr.getDisplayValue('state')
        });
    }
})();

CSS

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.table th {
    background-color: #f2f2f2;
    text-align: left;
}

.table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.table tr:hover {
    background-color: #ddd;
}

Please mark helpful & correct answer if it's really worthy for you.

Thanks,

BK