Introducing the new Adaptation Editor experience for SAPUI5 adaptation projects

Introducing the new Adaptation Editor experience for SAPUI5 adaptation projects
Estimated read time 6 min read

SAPUI5 flexibility to adapt standard SAP apps

SAPUI5 is SAP’s strategic Web framework for Web applications such as SAP Fiori. In this context, SAPUI5 flexibility offers capabilities to adapt standard apps, not only for developers but also for key users and end users using simple WYSIWYG drag and drop tools. Learn about all the capabilities: SAPUI5 Flexibility – All You Need to Know. SAPUI5 flexibility provides features to realize a clean core approach with on-stack extensions: SAP standard apps remain untouched, no modifications are needed, and even predefined extension points are not needed anymore.

Developers can leverage the concepts of SAPUI5 flexibility by using SAPUI5 adaptation projects in SAP Business Application Studio (BAS). Those projects contain all code-based custom adaptations, created in the various editors of BAS.

 

📣  Goodbye SAPUI5 Visual Editor, welcome Adaptation Editor

Following Introducing SAPUI5 Adaptation Projects in Visual Studio Code I now have more news: To improve the development experience and harmonize the editors for SAPUI5 adaptation projects offered in BAS and VS Code, BAS now features the new Adaptation Editor, replacing the SAPUI5 Visual Editor.

Picture: New Adaptation Editor

The Adaptation Editor

… opens in a separate browser tab, offering more space for the editor and especially for the canvas showing the app preview. This let’s you view the (desktop) app in a more realistic size to understand how it will look like for your end users,… launches and runs much faster and more robust. Keep in mind that for launching, it still needs to pull the standard app from your (on-prem) system,… has a slightly changed UX flow with a dedicated button to explicitly save changes and then continue to work on your code in the BAS browser tab,… adds support for SAP S/4HANA Cloud in VS Code,… is now part of the “SAP Fiori Tools – ADP” extension of BAS, contained e.g. in dev spaces of type ‘SAP Fiori’. With this, the delivery of tools around SAP Fiori has a hamonized foundation for future capabilities, which will further enhance the developer experience.

The new Adaptation Editor

The Adaptation Editor provides an intuitive experience to work with adaptation projects. It features:

the Outline pane (top left) to understand the structure of controls on the pagethe Changes (bottom left) you’ve done so farthe Canvas (middle) to preview your application and create changesthe Properties (right) pane view / edit control propertiesA toolbar allowing you to use:Navigation mode to ‘use’ the app and navigate through it until you found the area to adapt,UI Adaptation mode to add custom changes. Selecting an element in the Canvas highlights it in the Outline and shows its properties,Save to … well, save your changes after condensing them to the minumum.

Launch the new Adaptation Editor

See the SAP Help documentation on Adapting an Application. The high-level steps are:

Create an SAPUI5 adaptation project in SAP Business Application Studio, which refers to a standard SAP app.In the Explorer, click Open Adaptation Editor in the context menu of your project. Alternatively, use the Command Palette to find the command Fiori: Open Adaptation Editor.

See more details in:

SAPUI5 Flexibility – All You Need to KnowSAP Business Application Studio: Extending SAP Fiori ApplicationsSAP Fiori Tools: Extending an Existing Application 

​ SAPUI5 flexibility to adapt standard SAP appsSAPUI5 is SAP’s strategic Web framework for Web applications such as SAP Fiori. In this context, SAPUI5 flexibility offers capabilities to adapt standard apps, not only for developers but also for key users and end users using simple WYSIWYG drag and drop tools. Learn about all the capabilities: SAPUI5 Flexibility – All You Need to Know. SAPUI5 flexibility provides features to realize a clean core approach with on-stack extensions: SAP standard apps remain untouched, no modifications are needed, and even predefined extension points are not needed anymore.Developers can leverage the concepts of SAPUI5 flexibility by using SAPUI5 adaptation projects in SAP Business Application Studio (BAS). Those projects contain all code-based custom adaptations, created in the various editors of BAS. 📣  Goodbye SAPUI5 Visual Editor, welcome Adaptation EditorFollowing Introducing SAPUI5 Adaptation Projects in Visual Studio Code I now have more news: To improve the development experience and harmonize the editors for SAPUI5 adaptation projects offered in BAS and VS Code, BAS now features the new Adaptation Editor, replacing the SAPUI5 Visual Editor. Picture: New Adaptation EditorThe Adaptation Editor… opens in a separate browser tab, offering more space for the editor and especially for the canvas showing the app preview. This let’s you view the (desktop) app in a more realistic size to understand how it will look like for your end users,… launches and runs much faster and more robust. Keep in mind that for launching, it still needs to pull the standard app from your (on-prem) system,… has a slightly changed UX flow with a dedicated button to explicitly save changes and then continue to work on your code in the BAS browser tab,… adds support for SAP S/4HANA Cloud in VS Code,… is now part of the “SAP Fiori Tools – ADP” extension of BAS, contained e.g. in dev spaces of type ‘SAP Fiori’. With this, the delivery of tools around SAP Fiori has a hamonized foundation for future capabilities, which will further enhance the developer experience.The new Adaptation EditorThe Adaptation Editor provides an intuitive experience to work with adaptation projects. It features:the Outline pane (top left) to understand the structure of controls on the pagethe Changes (bottom left) you’ve done so farthe Canvas (middle) to preview your application and create changesthe Properties (right) pane view / edit control propertiesA toolbar allowing you to use:Navigation mode to ‘use’ the app and navigate through it until you found the area to adapt,UI Adaptation mode to add custom changes. Selecting an element in the Canvas highlights it in the Outline and shows its properties,Save to … well, save your changes after condensing them to the minumum.Launch the new Adaptation EditorSee the SAP Help documentation on Adapting an Application. The high-level steps are:Create an SAPUI5 adaptation project in SAP Business Application Studio, which refers to a standard SAP app.In the Explorer, click Open Adaptation Editor in the context menu of your project. Alternatively, use the Command Palette to find the command Fiori: Open Adaptation Editor.See more details in:SAPUI5 Flexibility – All You Need to KnowSAP Business Application Studio: Extending SAP Fiori ApplicationsSAP Fiori Tools: Extending an Existing Application   Read More Technology Blogs by SAP articles 

#SAP

#SAPTechnologyblog

Avatar for

You May Also Like

More From Author