You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

form-client-scripting.md 2.4 KiB

123456789101112131415161718192021222324252627282930313233343536373839
  1. ## Añadir Scripts a nuestros formularios
  2. Ya que tenemos creado el sistema básico que funciona sin problemas sin escribir una linea de código. Vamos a escribir algunos scripts
  3. para hablar la aplicación más interactiva y agregar validaciones para que el usuario no pueda introducir información erronea.
  4. ### Scripts del lado del Cliente
  5. En el DocType **Library Transaction**, solo tenemos campo para el Nombre del miembro. No hemos creado dos campos. Esto podría ser dos campos (y probablemente debería), pero para los motivos del ejemplo, vamos a considerar que tenemos que implementarlo así. Para hacerlo vamos a tener que escribir un manejador de eventos para el evento que ocurre cuando el usuario selecciona el campo `library_member` y luego accede a la información del miembro desde el servidor usando el REST API y cambia los valores en el formulario.
  6. Para empezar el script, en el directorio `library_management/doctype/library_transaction`, crea un nuevo archivo `library_transaction.js`.
  7. Este archivo va a ser ejecutado automáticamente cuando la primer Library Transaction es abierta por el usuario. En este archivo, podemos establecer eventos y escribir otras funciones.
  8. #### library_transaction.js
  9. frappe.ui.form.on("Library Transaction", "library_member",
  10. function(frm) {
  11. frappe.call({
  12. "method": "frappe.client.get",
  13. args: {
  14. doctype: "Library Member",
  15. name: frm.doc.library_member
  16. },
  17. callback: function (data) {
  18. frappe.model.set_value(frm.doctype,
  19. frm.docname, "member_name",
  20. data.message.first_name
  21. + (data.message.last_name ?
  22. (" " + data.message.last_name) : ""))
  23. }
  24. })
  25. });
  26. 1. **frappe.ui.form.on(*doctype*, *fieldname*, *handler*)** es usada para establecer un manejador de eventos cuando la propiedad library_member es seleccionada.
  27. 1. En el manejador, vamos a disparar una llamada AJAX a `frappe.client.get`. En respuesta obtenemos el objeto consultado en formato JSON. [Aprende más acerca del API](/frappe/user/en/guides/integration/rest_api).
  28. 1. Usando **frappe.model.set_value(*doctype*, *name*, *fieldname*, *value*)** cambiamos el valor en el formulario.
  29. **Nota:** Para verificar si su script funciona, recuerda Recargar/Reload la página antes de probar el script. Los cambios realizados a los script del lado del Cliente no son automáticamente cargados nuevamente cuando estas en modo desarrollador.
  30. {next}