Custom Portals Notes Handler

¿Cuántas veces has necesitado añadir una nota en tu Portals y has tenido que hacer el típico…?:

  1. Asignar permisos de entidad
  2. Crear un formulario de entidad
  3. Crear un formulario de metadatos de entidad
  4. Hacer algo para la terrible interfaz que nos dan con las notas.

Ya sabes de lo que hablo…¡¡¡Esto!!!

Y después…

Asi que…¿ qué te parece si te digo que hay un modo (no documentado), por el cual podemos jugar con el añadir notas y eliminar notas ? No he puesto el de edición, también hay una api para ello, pero no me ha parecido necesario incluirlo con las más comunes.

Code

Voy a poner el código directamente aquí y no voy a guiarte por todo ello. La única cosa que voy a puntalizarte, es que vas a necesitar incluir este código en una Plantilla Web.

¿Por qué? Simple. Vamos a usar liquid para obtener la id de la web, que es necesario para montar las urls de añadir o eliminar notas.

Para el propósito de este código, voy a añadir notas al contacto o eliminarlo de él. Por cierto, ten claro que vas a tener que hacer el primer paso que he mencionado arriba del todo, vas a tener que asignar los permisos de entidad para poder jugar con las notas como lo harías con un formulario normal.

<!-- Code for selecting the input and put and input for setting the id to be deleted-->

<div class="container">
  <div class="row">
    <label for="myFile">Select your file to upload: </label
    ><input type="file" id="myFile" onchange="addNote('myFile')" />

    <label for="myFileToDelete">Id annotation to be deleted: </label>
    <input type="text" id="myFileToDelete" /><button
      type="button"
      onclick="deleteNote('myFileToDelete')"
    >
      Delete note
    </button>
  </div>

  <!-- Entity form just for demo purposes--->

  <div class="row">
    {% entityform name:"NotesForm" %}
  </div>
</div>

<script>
  ///URLS to be adding or deleting the note
  var urlAddNote = "/_services/entity-form-addnote/{{website.id}}";
  var urlDeleteNote = "/_services/entity-form-deletenote/{{website.id}}";

  //Action for deleting the note

  function deleteNote(attachId) {
    var annotationId = $("#" + attachId).val();
    var jsonannotationdelete = '{"id":"' + annotationId + '"}';

    return shell
      .ajaxSafePost({
        type: "POST",
        contentType: "application/json",
        url: urlDeleteNote,
        data: jsonannotationdelete
      })
      .then(function(result) {
        alert("This has been deleted");
      });
  }

  //Action for adding the note

  function addNote(idFileInput) {
    var file = $("#" + idFileInput)[0].files[0];
    var formData = new FormData();
    formData.append("regardingEntityLogicalName", "contact");
    formData.append("regardingEntityId", "{{user.id}}");
    formData.append("text", file.name);
    formData.append("isRequired", "");
    formData.append("attachmentSettings", "");
    formData.append("file", file);

    shell.getTokenDeferred().done(function(token) {
      formData.append("__RequestVerificationToken", token);
      shell
        .ajaxSafePost({
          url: urlAddNote,
          method: "POST",
          data: formData,
          contentType: false,
          processData: false
        })

        .then(
          function(correct) {
            alert("Everything was correct");
          },
          function(error) {
            alert("There was an error: ", error);
          }
        );
    });
  }
</script>

🔥 Consejo: Si añades un formulario de entidad con sus correspondientes notas, vas a poder comprobar que es lo que contiene ese attachmentSettings, es un campo que está informado como oculto, copias y pegas, y lo mismo sucederia si tienes que tener el isRequired.

La única cosa que voy a explicar aquí es el hecho de que vamos a hacer una query ajax post contra los servicios disponibles para nosotros.

Para eliminar la nota necesitas proveer a la funcion de un JSON como ves, con el id de la nota.

He hecho un ejemplo en el cual puedes ver como pongo a mano el id de la nota y como lo elimino mediante un botón que recoge ese id y elimina la nota.

Por otro lado, tenemos un formulario de datos, es el típico ”

” cuando recoges datos, y lo que necesitamos mandar es simplemente la entidad referenciada (en nuestro caso contacto), el nombre del archivo (cogido del archivo) y el archivo en sí que se recoge desde input type=file

¿Fácil eh?

Conclusión

Ese es todo el post. No he querido tomarme mucho tiempo explicándolo porque es super sencillo de seguir, pero que creo que va a ser muy útil para los desarrolladores que no han visto esto antes y que no saben como modificar esa terrible interfaz que os he mostrado antes.

Cualquier comentarios o pregunta, por favor, mándame un email a : me@victorsolaya.com

¡Por cierto!

No sé si lo sabes, pero voy a dar una charla pronto acerca de Portals + Stripe + Microsoft Teams + Power Automate para el Scottish Summit. Por supuesto, estás invitado . Simplemente coge un ticket y apúntate. Va a ser increíble.

Simplemente te digo, que mi charla será en escocés, no inglés, escocés con acento spanish, va a estar muy chulo, ya verás!

Únete a la newsletter