SlideShare una empresa de Scribd logo
Demo: LWC Record Edit Form
Componente Base lightning-record-edit-form
Senior Developer
@ Altimetrik UY
federico.giust@icloud.com
https://github.com/fedegiust
@federicogiust
https://www.linkedin.com/in/federicogiust/
Federico Giust
Demo: LWC Record Edit Form
lightning-record-edit-form
El componente lightning-record-edit-form es un wrapper que acepta un record ID y puede ser usado para
mostrar uno o mas campos y labels asociados a dicho registro. Se utiliza el componente lightning-input-field
dentro de lightning-record-edit-form para crear campos editables, o bien lightning-output-field para solo
lectura.
• Requiere un record Id para mostrar los campos del registro.
• Utiliza Lightning Data Services.
• No requiere controladores Apex adicionales.
• Se encarga del field-level security y sharing automaticamente. (Los usuarios solo ven la data que tienen
acceso)
https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation
Call center con una lista de contactos, cada contacto tiene un e-Pin configurado para acceder al
soporte.Segun el nivel de acceso del agente van a poder ver todo el e-Pin o solo los ultimos 4 digitos.
El campo es de solo lectura en los layout, y se podra modificar mediante un quick action. En el mismo, si el
usuario tiene permiso de ver data encriptada se le mostrara el pin completo. En el caso de no tener permiso,
el pin estara enmascarado y solo podra ver los ultimos 4 digitos, pero al momento de editar el usuario podra
ver lo que esta digitando.
Para lograrlo, vamos a tener un LWC usando el componente base lightning-record-edit-form que usa LDS y
va a tener que ser expuesto en un Aura component para tener la posibilidad de usarlo como Quick Action,
debido a las limitaciones actuales de LWC.
Caso de uso
Call Center con e-Pin
Caso de uso
Un administrador tendra acceso a ver el e-Pin. Un Usuario Standard solo vera los ultimos 4 digitos.
Al momento de editar el usuario vera lo que digita.
Para poder desarrollar LWC necesitamos lo siguiente:
• NodeJS.
• Java SDK 8 o superior.
• El cliente de SFDX.
• VisualStudio Code con las extensiones de Salesforce.
• ESLint (opcional).
Que necesitamos?
Para trabajar con LWC
En este ejemplo tendremos
• Org configurada con dos usuarios
• Uno de ellos Sys Admin
• El otro Standard User (por ej: Agente del call center)
• Un Permission Set para habilitar "View Encrypted Data" y asignado al Sys Admin
• Un campo de nombre e-Pin en el objeto Contact, el mismo va a ser de tipo Texto y encriptado.
• Un Quick Action en Contact, llamando al componente
Org Setup
En este ejemplo tendremos
• Un LWC con el formulario (lightning-record-edit-form) para editar el e-Pin.
• Un <aura:component> como wrapper del LWC el cual le va a pasar el recordId al LWC
• Un Quick Action en Contact, llamando al aura:component
Componente
DEMO
Recursos y Referencias
• Salesforce CLI
• https://developer.salesforce.com/docs/atlas.en-
us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm
• Lightning Web Components Developer Guide
• https://developer.salesforce.com/docs/component-library/documentation/lwc
• Lightning Web Components - Component Reference
• https://developer.salesforce.com/docs/component-library/overview/components
• Trailhead
• https://trailhead.com
Gracias!
@federicogiust
https://github.com/fedegiust/lwc-recordeditform

Más contenido relacionado

La actualidad más candente

Sesion 3. desarrollo de aplicaciones jee
Sesion 3. desarrollo de aplicaciones jeeSesion 3. desarrollo de aplicaciones jee
Sesion 3. desarrollo de aplicaciones jee
Héctor Santos
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
Luis Fernando Aguas Bucheli
 
Asp.net
Asp.netAsp.net
Asp.net
tavo2484
 
Introducción a Java EE
Introducción a Java EEIntroducción a Java EE
Introducción a Java EE
Paco Saucedo
 
Introducción a JEE
Introducción a JEEIntroducción a JEE
Introducción a JEE
Iker Canarias
 
Modulo 1 java ee platform
Modulo 1   java ee platformModulo 1   java ee platform
Modulo 1 java ee platform
Roberto Marchena
 
Definición de apis con swagger
Definición de apis con swaggerDefinición de apis con swagger
Definición de apis con swagger
j_copete
 
Seminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
Seminario de programación Java, con Apache Maven, J2EE, JPA, PrimefacesSeminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
Seminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
Alejandro Bolaños Ussa
 
Java script
Java scriptJava script
Java script
Yesith Valencia
 
Introducción a Zend Framework 2
Introducción a  Zend Framework 2Introducción a  Zend Framework 2
Introducción a Zend Framework 2
El Taller Web
 
Arquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EEArquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EE
Carlos Gavidia-Calderon
 
[ES] Introducción a Java EE 7 & HTML 5
[ES] Introducción a Java EE 7 & HTML 5[ES] Introducción a Java EE 7 & HTML 5
[ES] Introducción a Java EE 7 & HTML 5
Eudris Cabrera
 
Persistencia de datos_hibernate_arquitecturas_de_software
Persistencia de datos_hibernate_arquitecturas_de_softwarePersistencia de datos_hibernate_arquitecturas_de_software
Persistencia de datos_hibernate_arquitecturas_de_software
Jose Luis Bugarin Peche
 
SAP ABAP Proxy Objects: Configuración del entorno
SAP ABAP Proxy Objects: Configuración del entornoSAP ABAP Proxy Objects: Configuración del entorno
SAP ABAP Proxy Objects: Configuración del entorno
Oreka IT
 
Trabajar con bases de datos desde ASP.NET
Trabajar con bases de datos desde ASP.NETTrabajar con bases de datos desde ASP.NET
Trabajar con bases de datos desde ASP.NET
Javier Roig
 
Desarrollando con APIs
Desarrollando con APIsDesarrollando con APIs
Desarrollando con APIs
Arturo Garrido
 
Aplicaciones empresariales Java EE en la nube
Aplicaciones empresariales Java EE en la nubeAplicaciones empresariales Java EE en la nube
Aplicaciones empresariales Java EE en la nube
Fernando Montaño
 
Spring Mvc Final
Spring Mvc FinalSpring Mvc Final
Spring Mvc Final
Jose Juan R. Zuñiga
 

La actualidad más candente (20)

Sesion 3. desarrollo de aplicaciones jee
Sesion 3. desarrollo de aplicaciones jeeSesion 3. desarrollo de aplicaciones jee
Sesion 3. desarrollo de aplicaciones jee
 
5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web5-Unidad 2: Diseño de Vista-2.2 Para Web
5-Unidad 2: Diseño de Vista-2.2 Para Web
 
Java ee 6
Java ee 6Java ee 6
Java ee 6
 
Framework
FrameworkFramework
Framework
 
Asp.net
Asp.netAsp.net
Asp.net
 
Introducción a Java EE
Introducción a Java EEIntroducción a Java EE
Introducción a Java EE
 
Introducción a JEE
Introducción a JEEIntroducción a JEE
Introducción a JEE
 
Modulo 1 java ee platform
Modulo 1   java ee platformModulo 1   java ee platform
Modulo 1 java ee platform
 
Definición de apis con swagger
Definición de apis con swaggerDefinición de apis con swagger
Definición de apis con swagger
 
Seminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
Seminario de programación Java, con Apache Maven, J2EE, JPA, PrimefacesSeminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
Seminario de programación Java, con Apache Maven, J2EE, JPA, Primefaces
 
Java script
Java scriptJava script
Java script
 
Introducción a Zend Framework 2
Introducción a  Zend Framework 2Introducción a  Zend Framework 2
Introducción a Zend Framework 2
 
Arquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EEArquitectura y diseño de aplicaciones Java EE
Arquitectura y diseño de aplicaciones Java EE
 
[ES] Introducción a Java EE 7 & HTML 5
[ES] Introducción a Java EE 7 & HTML 5[ES] Introducción a Java EE 7 & HTML 5
[ES] Introducción a Java EE 7 & HTML 5
 
Persistencia de datos_hibernate_arquitecturas_de_software
Persistencia de datos_hibernate_arquitecturas_de_softwarePersistencia de datos_hibernate_arquitecturas_de_software
Persistencia de datos_hibernate_arquitecturas_de_software
 
SAP ABAP Proxy Objects: Configuración del entorno
SAP ABAP Proxy Objects: Configuración del entornoSAP ABAP Proxy Objects: Configuración del entorno
SAP ABAP Proxy Objects: Configuración del entorno
 
Trabajar con bases de datos desde ASP.NET
Trabajar con bases de datos desde ASP.NETTrabajar con bases de datos desde ASP.NET
Trabajar con bases de datos desde ASP.NET
 
Desarrollando con APIs
Desarrollando con APIsDesarrollando con APIs
Desarrollando con APIs
 
Aplicaciones empresariales Java EE en la nube
Aplicaciones empresariales Java EE en la nubeAplicaciones empresariales Java EE en la nube
Aplicaciones empresariales Java EE en la nube
 
Spring Mvc Final
Spring Mvc FinalSpring Mvc Final
Spring Mvc Final
 

Similar a Lightning Web Components - Demo

Diggin into lightning web components
Diggin into lightning web componentsDiggin into lightning web components
Diggin into lightning web components
Federico Giust
 
2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop
Mario Cortés Flores
 
Lync Server 2010 Requerimientos de Clentes
Lync Server 2010 Requerimientos de ClentesLync Server 2010 Requerimientos de Clentes
Lync Server 2010 Requerimientos de Clentes
ITSanchez
 
Salesforce III developer day bbva innovation center Madrid by @almazanjl
Salesforce III developer day bbva innovation center Madrid by @almazanjlSalesforce III developer day bbva innovation center Madrid by @almazanjl
Salesforce III developer day bbva innovation center Madrid by @almazanjl
ticMind Consulting. Consultoría Partner de Salesforce Madrid
 
JS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World ExampleJS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World Example
SUGES (SharePoint Users Group España)
 
UDA-Componentes RUP. Tabla.v2.4.6
UDA-Componentes RUP. Tabla.v2.4.6UDA-Componentes RUP. Tabla.v2.4.6
UDA-Componentes RUP. Tabla.v2.4.6
Ander Martinez
 
Presentacion jade
Presentacion jadePresentacion jade
Presentacion jade
Magdiel Espinoza
 
Ers calzado ferrel
Ers calzado ferrelErs calzado ferrel
Ers calzado ferrel
cesar villalobos romero
 
Tr 069
Tr 069Tr 069
Tr 069
Ale Guardia
 
S4-PD1-2.2 EF
S4-PD1-2.2 EFS4-PD1-2.2 EF
2015 10 - Curso Cliente @firma INAP día 1
2015 10 - Curso Cliente @firma INAP día 12015 10 - Curso Cliente @firma INAP día 1
2015 10 - Curso Cliente @firma INAP día 1
Tomás García-Merás
 
1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML
Juan Carlos Rubio Pineda
 
Elementos sobre Symfony 2.1
Elementos sobre Symfony 2.1Elementos sobre Symfony 2.1
Elementos sobre Symfony 2.1
Yaismel Miranda
 
Propuesta devops pasesv1
Propuesta devops pasesv1Propuesta devops pasesv1
Propuesta devops pasesv1
juancarlosquevedomor
 
Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Robert Rayco Quiroz
 
Proceso MDA y Scrum
Proceso MDA y ScrumProceso MDA y Scrum
Latch OpenLDAP
Latch OpenLDAPLatch OpenLDAP
Latch OpenLDAP
engineer_02
 
Curso: Programación Web con Tecnología Java
Curso:  	Programación Web con Tecnología JavaCurso:  	Programación Web con Tecnología Java
Curso: Programación Web con Tecnología Java
alvaro alcocer sotil
 

Similar a Lightning Web Components - Demo (20)

Diggin into lightning web components
Diggin into lightning web componentsDiggin into lightning web components
Diggin into lightning web components
 
2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop2018.sps madrid.spfx workshop
2018.sps madrid.spfx workshop
 
Factory talk
Factory talkFactory talk
Factory talk
 
Lync Server 2010 Requerimientos de Clentes
Lync Server 2010 Requerimientos de ClentesLync Server 2010 Requerimientos de Clentes
Lync Server 2010 Requerimientos de Clentes
 
Salesforce III developer day bbva innovation center Madrid by @almazanjl
Salesforce III developer day bbva innovation center Madrid by @almazanjlSalesforce III developer day bbva innovation center Madrid by @almazanjl
Salesforce III developer day bbva innovation center Madrid by @almazanjl
 
JS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World ExampleJS Patterns Applied to a Real World Example
JS Patterns Applied to a Real World Example
 
UDA-Componentes RUP. Tabla.v2.4.6
UDA-Componentes RUP. Tabla.v2.4.6UDA-Componentes RUP. Tabla.v2.4.6
UDA-Componentes RUP. Tabla.v2.4.6
 
Presentacion jade
Presentacion jadePresentacion jade
Presentacion jade
 
Ers calzado ferrel
Ers calzado ferrelErs calzado ferrel
Ers calzado ferrel
 
Tr 069
Tr 069Tr 069
Tr 069
 
S4-PD1-2.2 EF
S4-PD1-2.2 EFS4-PD1-2.2 EF
S4-PD1-2.2 EF
 
2015 10 - Curso Cliente @firma INAP día 1
2015 10 - Curso Cliente @firma INAP día 12015 10 - Curso Cliente @firma INAP día 1
2015 10 - Curso Cliente @firma INAP día 1
 
S4 - EF
S4 - EFS4 - EF
S4 - EF
 
1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML1/9 Curso JEE5, Soa, Web Services, ESB y XML
1/9 Curso JEE5, Soa, Web Services, ESB y XML
 
Elementos sobre Symfony 2.1
Elementos sobre Symfony 2.1Elementos sobre Symfony 2.1
Elementos sobre Symfony 2.1
 
Propuesta devops pasesv1
Propuesta devops pasesv1Propuesta devops pasesv1
Propuesta devops pasesv1
 
Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)Manual 2014 i 04 lenguaje de programación ii (0870)
Manual 2014 i 04 lenguaje de programación ii (0870)
 
Proceso MDA y Scrum
Proceso MDA y ScrumProceso MDA y Scrum
Proceso MDA y Scrum
 
Latch OpenLDAP
Latch OpenLDAPLatch OpenLDAP
Latch OpenLDAP
 
Curso: Programación Web con Tecnología Java
Curso:  	Programación Web con Tecnología JavaCurso:  	Programación Web con Tecnología Java
Curso: Programación Web con Tecnología Java
 

Último

Escaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipoEscaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipo
nicromante2000
 
PitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitalesPitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitales
juanorejuela499
 
Maquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdfMaquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdf
juanjosebarreiro704
 
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJECONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
SamuelGampley
 
Caso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La SalleCaso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La Salle
Ecaresoft Inc.
 
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdfIntroducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
AbbieDominguezGirond
 

Último (6)

Escaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipoEscaneo y eliminación de malware en el equipo
Escaneo y eliminación de malware en el equipo
 
PitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitalesPitchCollabART uniendo talentos, creando maravillas digitales
PitchCollabART uniendo talentos, creando maravillas digitales
 
Maquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdfMaquina de Dibujo y Escritura Automática.pdf
Maquina de Dibujo y Escritura Automática.pdf
 
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJECONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
CONCEPTOS DE PROGRAMACION CUALQUIER LENGUAJE
 
Caso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La SalleCaso de exito Cirrus - Hospital La Salle
Caso de exito Cirrus - Hospital La Salle
 
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdfIntroducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
Introducción_a_las_APIs_y_Desarrollo_Back-end-Abbie Dominguez Girondo.pdf
 

Lightning Web Components - Demo

  • 1. Demo: LWC Record Edit Form Componente Base lightning-record-edit-form
  • 2. Senior Developer @ Altimetrik UY federico.giust@icloud.com https://github.com/fedegiust @federicogiust https://www.linkedin.com/in/federicogiust/ Federico Giust
  • 3. Demo: LWC Record Edit Form lightning-record-edit-form El componente lightning-record-edit-form es un wrapper que acepta un record ID y puede ser usado para mostrar uno o mas campos y labels asociados a dicho registro. Se utiliza el componente lightning-input-field dentro de lightning-record-edit-form para crear campos editables, o bien lightning-output-field para solo lectura. • Requiere un record Id para mostrar los campos del registro. • Utiliza Lightning Data Services. • No requiere controladores Apex adicionales. • Se encarga del field-level security y sharing automaticamente. (Los usuarios solo ven la data que tienen acceso) https://developer.salesforce.com/docs/component-library/bundle/lightning-record-edit-form/documentation
  • 4. Call center con una lista de contactos, cada contacto tiene un e-Pin configurado para acceder al soporte.Segun el nivel de acceso del agente van a poder ver todo el e-Pin o solo los ultimos 4 digitos. El campo es de solo lectura en los layout, y se podra modificar mediante un quick action. En el mismo, si el usuario tiene permiso de ver data encriptada se le mostrara el pin completo. En el caso de no tener permiso, el pin estara enmascarado y solo podra ver los ultimos 4 digitos, pero al momento de editar el usuario podra ver lo que esta digitando. Para lograrlo, vamos a tener un LWC usando el componente base lightning-record-edit-form que usa LDS y va a tener que ser expuesto en un Aura component para tener la posibilidad de usarlo como Quick Action, debido a las limitaciones actuales de LWC. Caso de uso Call Center con e-Pin
  • 5. Caso de uso Un administrador tendra acceso a ver el e-Pin. Un Usuario Standard solo vera los ultimos 4 digitos. Al momento de editar el usuario vera lo que digita.
  • 6. Para poder desarrollar LWC necesitamos lo siguiente: • NodeJS. • Java SDK 8 o superior. • El cliente de SFDX. • VisualStudio Code con las extensiones de Salesforce. • ESLint (opcional). Que necesitamos? Para trabajar con LWC
  • 7. En este ejemplo tendremos • Org configurada con dos usuarios • Uno de ellos Sys Admin • El otro Standard User (por ej: Agente del call center) • Un Permission Set para habilitar "View Encrypted Data" y asignado al Sys Admin • Un campo de nombre e-Pin en el objeto Contact, el mismo va a ser de tipo Texto y encriptado. • Un Quick Action en Contact, llamando al componente Org Setup
  • 8. En este ejemplo tendremos • Un LWC con el formulario (lightning-record-edit-form) para editar el e-Pin. • Un <aura:component> como wrapper del LWC el cual le va a pasar el recordId al LWC • Un Quick Action en Contact, llamando al aura:component Componente
  • 10. Recursos y Referencias • Salesforce CLI • https://developer.salesforce.com/docs/atlas.en- us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference.htm • Lightning Web Components Developer Guide • https://developer.salesforce.com/docs/component-library/documentation/lwc • Lightning Web Components - Component Reference • https://developer.salesforce.com/docs/component-library/overview/components • Trailhead • https://trailhead.com