Skip to Content
Author's profile photo Sharath M G

My Web IDE Story

Introduction: I am an SAP UX Consultant with Deloitte Consulting. I am currently working on SAPUI5 and SAP Fiori. I have been working in the domain of SAP User Interface for the past 10 years, mainly on SAP NetWeaver Portal, Web Dynpro, and SAPUI5.

Scenario:

To develop a custom SAPUI5 application that enables the client to manage the time billing per project.

The client has SAP HANA in their landscape and the development team is provided access to the SAP Cloud Web IDE environment to develop the application.

The cloud infrastructure is fully configured to connect to the on-premise SAP HANA system.

The client had contracted a design team to provide quasi-functional wireframes. The design team was not from SAP.

Challenge

To implement the solution within a short time frame and ensure that the UI is in line with the designs.

USAGE of SAP Web IDE

SAP Web IDE was chosen as the preferred environment to develop the SAPUI5 application. SAP Web IDE allowed us to quickly prepare running applications at the start of the implementation phase. We used the layout editor to drag the required controls and form templates to replicate the designs. We also converted many of the forms and other related controls based on functionality into fragments using the menu options.

I used the layout editor extensively to structure the View by splitting it into multiple fragments. This ensured reusability, ease of maintenance, and better readability. I also used the SAP Web IDE custom styles included in the linked CSS file. The i18n file was used to maintain all the text content used in the view.

I used the GitHub plugin to save the project in the HANA Cloud Git repository. Sharing the project through Git created a seamless and simplified process for team development on the same project when the deadlines were tight. Git also mitigated our concerns on code availability and security.

I faced difficulties designing the UI based on the wireframes form the design team. The design team had not considered the SAP Fiori launchpad template, and this resulted in several discussions when we tried to align the existing wireframes to the standard offerings of the launchpad.

Observations – Positive

SAP Web IDE provided simple templates which enabled us to have quick start up applications.

I found the View design simplified with the WYSIWYG (layout) editor, especially for simplified forms.  The option to directly link the text in the i18n file to the label controls was very useful.

The integration of OData services with the View layout using entities drastically simplified data access calls, especially during the initial load of the screen.

The seamless integration of Github considerably simplified the task of code share and team development. The tracking of any changes was easy and allowed us to split the development across consultants.

Observations – Negative

In spite of the improvements in comparison to the Eclipse editor, we were still unable to understand which control was needed to achieve our UI design.

During server downtimes, our team could not perform any development.

 

Impact of Web IDE on Timelines

My earlier project used Eclipse editor to perform SAPUI5 developments. SAP Web IDE simplified the project structure created by using pre-defined templates and made running the application easier. It also saved us time by eliminating the need to create the local Java SDK.

The Layout editor simplified the View creation.

The OData integration with on-premise SAP systems allowed quick deployment and provided helpful run options for the developers.

Overall, I found a decrease of 30% – 40% of the time for development in comparison to the Eclipse editor.

Conclusion

SAP Web IDE is a tool with the potential to be a killer editor. It can speed up development and ease the extension requirements of the developed application. Improvements to the Layout editor and the continuous evolution of the product will go a long way in increasing adoption by development teams.

I personally look forward to many more years of development using SAP Web IDE.

Regards,

Sharath

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Micky Oestreich
      Micky Oestreich

      Did you use the generated code from the Web IDE directly or just as 'template' code? If you did use it directly what was your experience? Doesn't the web IDE generate too much overhead which makes extending it harder than it should be? Please share your experience.

      Thanks in advance.

      Kind regards,

      Micky

      Author's profile photo Sharath M G
      Sharath M G
      Blog Post Author

      Hello Micky,

      I used the Web IDE template for the basic project creation. This created the file and folder structure but not much in terms of code.  I did not use the template to import an OData or map the data to view etc.

      I did not use the template to import an OData or map the data to view etc.

      I agree with your point that using the template may result in unnecessary code, but that's just the way to keep in generic.

      In my opinion, templates provide a head start especially if you are new to development in UI5/WebIDE. Once you gain a bit of experience, it would be used sparingly.

      I would love to hear your experience esp. on the overhead and the challenges you had to face due to the template code generation.

      Feel free to drop a comment on it.

      Regards,

      Sharath

      Author's profile photo Maheshchandra VVNS
      Maheshchandra VVNS

      Hi Sharath,

       

      Good Write up on WEBIDE,  few more to add are

      • Special characters in Text Property will work without any issues in Layout editor.(eg: Label as Prodcuts & Sales)
      • Complex bindings to elements mage much simpler
      • Faster and easy Fragment creation and calling (reusability)
      • Fiori Launchpad support file structures (component, Metadata etc) which eclise will not provide by default.
      • Git Integrations

      -ve as mentioned: Layout editor still not as easy as a WD Java editors(NWDS), those who worked in NWDS can still feel Layout editor lacks those features and needs improvement.

      Overall for a Faster and Collaborative Team development environment WebIDE is much better compared to eclipse

      my 2 cents,

      Thanks,

      Mahesh