JSFiddle - React, Tailwind, and code Playground

by João Paulo Santos

HTML

<div id="form-sms">
        <table>
            <tr>
                <td class='td-align-right'>DDD/Telefone*: </td>
                <td>
                    <input type="text" id="ddd" class="campo-obrigatorio" maxlength="2" />
                    <input type="text" id="telefone" class="campo-obrigatorio" maxlength="9" />
                </td>
            </tr>
            <tr>
            <td class='td-align-right'>Modelos: </td>
            <td>
                <select id="texto-predefinido">
                    <option value="">Selecione </option>
                </select><br />
            </td>
            </tr>
            <tr>
                <td class='td-align-right td-align-top'>Texto SMS*: </td>
                <td>
                    <textarea id="texto" cols="40" rows="3" class="campo-obrigatorio" maxlength="107"></textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><span id="caracteres">107</span> caracter(es) restante(s).</td>
            </tr>
            <tr>
                <td></td>
                <td class='td-align-right'>
                    <input type="button" id="enviar" value="Enviar" />
                    <span id="aviso">Preencha todos os campos obrigatórios. </span>
                </td>
            </tr>
        </table>
    </div>

CSS

.atencao { border: 2px solid red; }
        #aviso { display:none; color: red; }
        #ddd { width: 40px; }
        .td-align-right { text-align:right; }
        .td-align-top { vertical-align: top; }

JavaScript

//'use strict';

//var context = SP.ClientContext.get_current();
//var user = context.get_web().get_currentUser();

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model

    
    /*function enviarMensagem() {
        var urlPaginaAtual = document.URL;
        var clientContext = new SP.ClientContext.get_current();
        hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
        parentCtx = new SP.AppContextSite(clientContext, hostweburl);
        parentWeb = parentCtx.get_web();
        context = new SP.ClientContext.get_current();
        this.websiteo = contexto.get_web();
        this.currentUser = websiteo.get_currentUser();
        context.load(currentUser);
        context.executeQueryAsync(Function.createDelegate(this, onUser), Function.createDelegate(this, onFail));

        function onUser() {
            var nomeUsuario = currentUser.get_title();
            createListItem(nomeUsuario);
        }
        function onFail() {
            alert('Erro inesperado, tente novamente.');
        }

        var oList = parentWeb.get_lists().getByTitle('Envio de SMS');

        // FUNÇÃO PARA CRIAR ITENS NA LISTA

        // Coluna Nome do Usuário
        // Coluna Texto
        // Coluna DDD
        // Coluna Telefone

        function createListItem(nomeUsuario) {
            var dataEnvio = new Date();
            var texto = $('#texto').val();
            var ddd = $("#ddd").val();
            var telefone = $("#telefone").val();

            var itemCreateInfo = new SP.ListItemCreationInformation();
            this.oListItem = oList.addItem(itemCreateInfo);
            oListItem.set_item('Name', nomeUsuario);
            oListItem.set_item('_Comments', texto);
            oListItem.set_item('Ddd', ddd);
            oListItem.set_item('Phone', telefone);
            oListItem.set_item('Created', dataEnvio);
            oListItem.update();
           ...