Lado do Cliente vs Lado do Servidor

Imagine que do lado do Cliente temos um formulário com os campos sys_id, first_name, last_name e email. 

Quando o usuário colar o sys_id de um usuário no campo sys_id e apertar Tab para mudar de campo, a plataforma deve:

- Ir até o Banco de Dados e trazer as informações referentes a esse sys_id na tabela de Usuários. 

É isso o que vamos implementar nesse artigo.

1 - Abra a sua PDI

2 - Navegue até System Definition > Script Includes 

2.1 - Clique em “New” e crie o Script Include 

Name: TeacherCarlos
Application: Global
Client callable: checked
Script:

var TeacherCarlos = Class.create();
TeacherCarlos.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    
    //Receive User sys_id and return User data
    Dados_usuario: function() {
        var obj = {};
        var userID = this.getParameter('sysparm_userid'); 
        var myuser = new GlideRecord('sys_user');
        myuser.addQuery('sys_id', userID);
        myuser.query();

        if (myuser.next()) {
            obj.sys_id = myuser.getValue('sys_id') || '';
            obj.first_name = myuser.getValue('first_name') || '';
            obj.last_name = myuser.getValue('last_name') || '';
            obj.email = myuser.getValue('email') || '';
        }
        return JSON.stringify(obj);
    },
    type: 'TeacherCarlos'

});

2.2 Clique em Submit 

2.3 Informe a role admin e clique em OK 

3 - Navegue até System Definition > Tables 

3.1 Clique em “New"

Label: Test 

Name: u_test 

Create module: checked 

Add module to menu: Self-Service 

Columns: 

-Clique em Submit 

4 - No canto superior esquerdo clique em All e na caixa de pesquisa digite “u_test.config” (ENTER) 

5 - Navegue até a seção “Client Scripts” e clique em “New” 

Informe:

Name: Bring User Data 

O nome da tabela já vai vir preenchido

UI Type: All 

Type: onChange 

Field name: sys_id  // Não é Sys ID

Script: 

function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    var test = g_form.getValue('u_sys_id');
    //alert(test);
    
    var ga = new GlideAjax('TeacherCarlos');//script include name
    ga.addParam('sysparm_name', 'Dados_usuario'); //method to be called
    ga.addParam('sysparm_userid', test); //send a parameter to the method
    ga.getXMLAnswer(userInfoParse);

    function userInfoParse(response) {
        if (response == '') {
            g_form.addErrorMessage('User not found with the informed sys_id.');
        } else {
            //alert(response);
            var obj = JSON.parse(response);
            //alert(obj.first_name.toString());
            g_form.setValue('u_sys_id', obj.sys_id.toString());
            g_form.setValue('u_first_name', obj.first_name.toString());
            g_form.setValue('u_last_name', obj.last_name.toString());
            g_form.setValue('u_email', obj.email.toString());
        }

    }

}

6 - Agora é possível ir até a tabela de Usuários e copiar um sys_id clicando com o botão direito em qualquer registro no valor da coluna User ID 

7 - Navegando até All novamente, você pode digitar (nomedatabela.do ENTER) para abrir o formulário de entrada de dados

8 - Cole o sys_id copiado na coluna sys_id e pressione Tab para mudar para outro campo

Isso vai chamar o Client Script. 

O Client Script vai chamar o Script Include e trazer os dados do Usuário de volta para o lado do Cliente. 

Finalmente, o Client Script trata a resposta para definir os valores dos campos na tela, exibindo esses valores ao usuário.

Nesse artigo vimos como funciona trafegar dados do browser para o Servidor e como recuperar dados do Servidor para o browser. 

Uma observação sobre o artigo de hoje, é que do ponto de vista da usabilidade não é muito útil disponibilizar uma interface que exige do usuário digitar um código como o Sys ID. 

No próximo artigo veremos como utilizar um campo do tipo Referência para melhorar a usabilidade.

Obrigado.