SAP WebIDE – Trucos y apuntes
Introducción
Después de dos años utilizando SAP WebIDE de manera satisfactoria, prácticamente he jubilado eclipse para centrarme en esta plataforma online de desarrollo proporcionada por SAP.

Paso sin mas a contar algunas lecciones aprendidas:
Organizar el trabajo con distintos Workspace
Una de las opciones mas útiles es el uso de múltiples entornos de trabajo bajo la misma cuenta de SAP. Estos entornos permiten agrupar el trabajo en como se desee.
Para gestionar y acceder a los distintos workspace seguiremos estos pasos:
- Accedemos a la gestion de workspaces pulsando sobre «usuario@workspace» y en el menu accedemos a «Workspace Manager»:

- Una vez seleccionado, nos aparecerán todos los workspace disponibles y la posibilidad de crear nuevos. Los datos de workspace que nos apareceran son: Nombre, workspace seleccionado, opcion de abrir el nuevo workspace y los plugins seleccionados.

- Para crear un nuevo workspace únicamente tenemos que seleccionar el botón «Create Workspace» y darle un nombre.
Problemas de acceso al servicio SAPWEBIde (¿Porqué me aparece esta pantalla de login?)
Uno de los problemas mas comunes cuando trabajamos en SAP Cloud Platform es la puesta en marcha de un proyecto, donde se inicia la construcción por parte de los desarrolladores mientras los arquitectos les vamos fastidiando el acceso configurando el SSO.
Inicialmente SAP Cloud viene con el sistema de usuarios propio de SAP (usuarios S o P) pero esto puede ser modificado para añadir el login corporativo o de alguna otra plataforma cloud como podria ser SSFF. Al acceder a WEBIde podemos ver una pantalla como esta.

Para solucionar los problemas que podamos tener relacionados con el acceso deberemos seguir un sencillo paso:
- Lo primero sera tener un usuario creado en el nuevo entrono. En el ejemplo anterior, un usuario en SSFF.
- Una vez creado el usuario, añadiremos los permisos para acceder a WEBIde. Nos vamos a «Services» > «SAP Web IDE Full-Stack «
- Dentro de SAP Web IDE Full-Stack accedemos a «Configure Service»

- Añadiremos los usuarios a los distintos roles preconfigurados para SAP WebIde. Seleccionaremos el ROL y mediante «Assing» añadiremos el usuario.

Compara distintos ficheros
Una de las novedades que presenta el servicio este 2019 es poder comprar ficheros dentro de un mismo workspace. Para ello seguiremos estos sencillos pasos.
- Seleccionamos los dos ficheros a comprar. Esto lo haremos mediante la tecla «ctrl» + click con el ratón a los ficheros a comprar.
- Una vez seleccionados pulsaremos click con el botón derecho y en el menu seleccionaremos comprar. (Ojo, tiene que ser 2 ficheros exactos, sino la opción no se muestra).

- Inmediatamente aparecerá el comparador que nos indicara las lineas eliminadas, añadidas o modificadas. Aun así, el apartado gráfico tiene que mejorar un poco por ahora.

Plugins personalizados
Aunque el tema de los pluguis personalizados da para una entrada en el blog, a parte de los que ofrece SAP, podemos añadir muchos otros o crear los nuestros propios.
Uno de los que aconsejo utilizar a los desarrolladores SAPUI5 es el destinado a comprar las distintas definiciones de idioma (i18n) de un proyecto SAPUI5 para verificar que no nos dejamos ninguna traducción por realizar. Añado mas información en este punto.

https://blogs.sap.com/2018/04/29/sap-web-ide-plugin-ui5-internationalizationi18n-helper-open-source/
La manera mas segura de utilizar este plugin es tenerlo instalado en nuestro propia cuenta:
- Nos bajamos el proyecto de GitHub en formato ZIP:
https://github.com/fatihpense/webide-i18n-plugin - Lo importamos a nuestro webide y realizamos un deploy del proyecto importado.
- Una vez realizado, creamos una destination como la siguiente. Nota: La url sera la misma que aparecerá al realizar el deploy

Testear una aplicación SAPUI5 con el framework de testing
Una vez tenemos la aplicación apunto de finalizar podemos realizar pruebas para distintas resoluciones de pantalla o distintos idiomas de navegador de manera rápida.
Para ello, seguiremos estos sencillos pasos:
- Pulsamos con el boton derecho sobre el proyecto a verificar. En el menu seleccionaremos «Run» > «Run Configurations»

- Crearemos una nueva configuración run copiando la original, seleccionaremos «Run index.html» y pulsaremos el boton de copia:

- Una vez copiada, son aparecerá a la nueva configuracion «Copy of Run index.html». La renombraremos a «Test index.html» (aunque no es necesario este paso) y marcaremos las opciones «With frame» y «Run with support assistant» (si ademas queremos que SAP nos verifique las best practices).

- Una vez modificados, puslaremos sobre Save and Run. Nos aparecerá la pantalla de ayuda.

Una de las opciones interesantes, al pulsar el botón de mas a la derecha aparece un código QR. Este código contiene la dirección para poder testear nuestra aplicación con dispositivos móviles.
- Des del editor podremos seleccionar si disparar nuestra aplicación en modo normal o en modo test gracias al selector:

Cambiar color del editor
Este truco nos permite cambiar el estilo del editor. Para ello, seleccionamos el icono de preferencias y pulsamos «Code Editor».

Verificar las Best practices mientras se construye
SAP WEBIde incorpora un analizador de código para asegurar que los desarrollos tiene la calidad marcada por SAP. Por defecto ya esta activado, pero en algunas ocasiones esto puede provocar que el navegador se cargue demasiado.
Una opción es que la verificación se haga al guardar. Para ello seguiremos estos pasos:
- Accedemos a «Preferencias»
- Seleccionamos «Code Check»
- Modificamos la opción «Check On» e informamos «Change»
- Guardamos los datos

Para poder visualizar los errores, avisos e informaciones referentes a best practices pulsamos el log de avisos para ver las indicaciones del proyecto.

En el log aparece la descripción del aviso, la ubicación en el fichero, y el tipo de incidencia. Al pulsar sobre Description se nos abrirá una nueva pestaña con el detalle y ejemplos de como solucionarlo.
Autoguardado y auto prettyprinter
Un corte de la red o un F5 en el momento de inspiración puede frustra nuestro trabajo. Para evitarlo, podemos activar un autoguardado cada 30 segundos.
De la misma manera, para evitar tener que estar formateando el código, podemos seleccionar la opción de aplicar pretty printer al guardar.
Ambas opciones estan disponibles en las preferencias de SAP WEBIde

Hasta aquí algunos de los consejos que he ido recopilando. A la velocidad en la que SAP esta incluyendo nuevas funcionalidades en SAP WEB IDE estoy seguro que dará para otra entrada.
Si queréis estar al corriente de todo, os aconsejo seguir las redes sociales de SAP WebIde:
Por último y no menos importante Suscribete, me ayudaras a hacer crecer este blog 😉
Buenas Enric,
Me encuentro con un problema.
Tengo que modificar un código y la gente que lo desarrolló no dejó el código fuente. Si importo la versión de productivo para usarla de fuente, al momento de hacer el cambio lo veo bien cuando hago el RUN del index o el RUN de Unit test pero cuando quiero deployar, si bien no da error, la nueva version no tiene el cambio.
Yo sé que el problema es porque la versión deployada no tiene exactamente la misma estructura que la versión source y además ya tiene los archivos component-preload.js y algunas otras cosas.
La pregunta es:
Cómo hacer para usar la versión deployada como source en SAP Web ide full stack y no tener problemas al momento de deployar el nuevo cambio ????
Desde ya muchas gracias !!!
Oscar
Hola Oscar,
Lo primero es verificar que el proyecto tiene la estructura adecuada dentro de WEBIde, esto significa que los ficheros deberían estar en la carpeta webapp. Si no lo tienes así podrás ejecutar des de WEVIde pero no des de un deploy.
Si no es esto, la segunda cosa es mirar como realizas el deploy, tienes distintas subcuentas para cada entorno? En caso afirmativo, si realizas el deploy mediante ZIP hay que activar la versión manualmente. (la recomendación es usar un MTA).
Saludos!
Hola, ¿como se agrega la conexión desde el Web IDE al ERP? , donde residen los programas desarrollados, ¿en el web ide asociado a mi cuenta? o ¿en el erp on premise al cual me conecto?.Alli va eso entre tantas dudas que tengo. Saludos
Hola Jose!
Gracias por visitar este blog. Sobre tu pregunta, intento hacer un resumen rápido:
Las conexiones entre un ERP y WEB ide se realizan con un túnel virtual llamado cloud connector. Una vez tienes conectados los dos entornos es necesario crear una destination en SCP para poder obtener los datos.
Una vez finalizas el desarrollo tu decides donde quieres alojar tu aplicación, puede ser en un SCP o en un GATEWAY (ERP). Al hacer deploy decides donde dirigir la aplicación.
Te recomiendo este par de lecturas para poder entrar mas en detalle, ya que la respuesta a esta pregunta abarca mucho:
https://help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/en-US/e6c7616abb5710148cfcf3e75d96d596.html
http://www.kodyaz.com/sap-abap/deploy-sap-web-ide-application-to-abap-repository.aspx
Hola , Buen dia conoces paginas que esten en español en donde expliquen sapui5 ?
Hola!
Gracias por leer mi blog! No conozco quias de SAPUI5 en español, pero te aconsejo que busques las guías oficiales de SAP (openSAP por ejemplo tiene subtítulos en varios idiomas, entre ellos español).
No te aconsejo los cursos de sitios externos a SAP ya que tiene un coste y su material se basa en los oficiales.
Saludos
Buenas! Hablas en algunos de tus post de SAP Business One? Me parece muy interesante la forma en la que explicas SAP, siendo muy intuitiva y útil para comprender mejor el funcionamiento de los programas. Saludos!
Buenas tardes Enric.
Una consulta cuando usted menciona el tema de los Plugins personalizado s (i18n), corresponde actualmente en la plataforma SAP BUSINNES APPLICATION STUDIO, cuando uno abre el editor Layout, cuando el abre esta funcionalidad muestra una página con el título i18n.
Agradezco su información.
Cordial saludo
Hola una consulta, en un desarrollo con sap web ide personal, cuando escribo muchas lineas en la vista worklist ya no permite ejecutar el aplicativo en chrome, lo unico que he hecho es juntar las lineas para que la capacidad de escribir aumente y he separado el codigo en otro js, por favor si tienes una idea para aumentar la capacidad sería genial.
Muchas gracias