SAP Fiori Introduction

By

SAP Fiori Design System

Accelerates and scales the design and development of enterprise software. It follows a modular design approach based on business roles, moving away from traditional monolithic transactions. It also Redefines the enterprise user experience by focusing on user tasks and workflows. SAP Fiori design system operates on two levels:
  • Universal values, principles, and practices apply across all technology platforms.
    • Values:- Consistency, Integration, Intelligence
    • Principles:- Role-based, Adaptive, Simple, Coherent, Delightful
    • Practices:- Design-Led Development, Design Council, Design Communities
  • SAP Fiori design languages provide standardized design guidance across multiple platforms.
    • SAP Fiori for Web
    • SAP Fiori for iOS
    • SAP Fiori for Android
    • SAP Conversational User Experience
SAP Fiori design system covers the below topics;

  • What is Fiori?
    • SAP Fiori is a design system that provides a consistent and holistic user experience for SAP software across platforms and devices.
  • Design Principles
    • Role-based: Designed for your business, your needs, and how you work.
    • Adaptive: Enables users to work where they want, regardless of the device.
    • Simple: Hep users focus on what is important, intuitively and quickly.
    • Coherent: Provide an intuitive and consistent experience across the enterprise.
    • Delighful: SAP Fiori enriches the user's work experience.
  • Design-Led Development Process
    • Explore: Identify the business challenges and innovation opportunities for customers.
    • Discover: You need a holistic view of the business roles affected by your apps.
    • Design: Come up with prototype and apply Fiori design guidelines to build a consistent UX
    • Deliver: Verify the final implementation and design to deliver the intended UX to end-user. 
    • Run&Scale: App can be adopted and available to the end-users.
  • Responsiveness
    • SAPUI5 makes responsive design easy by offering a wide range of UI controls that automatically adjust to different form factors and interaction styles. Additionally, SAPUI5 lets you adjust the size of the controls to match the type of interaction (such as touch device or keyboard/mouse). The advantage of responsive design is that apps can adjust to different screen sizes without requiring additional coding and maintenance efforts.
  • Accessibility in SAP Fiori
    • Accessibility refers to the possibility for everyone, It is an integral part of the SAP Fiori design system and SAPUI5. Accessibility support is incorporated at two levels:
      • Framework level
      • App level
SAP Fiori Evolution:
SAP Fiori has evolved out of a small initiative into an industry-scale design system for all SAP products. The latest and third evolution of SAP Fiori focuses on consistency, integration and intelligence to ensure that SAP Fiori can be used to integrate all products into one intelligent enterprise suite.
  • SAP Fiori 1.0
    • SAP Fiori started in 2013 and implemented with SAP UI5 version 1.26 - 1.38.
    • New theme SAP Blue Crystal (theme ID sap_bluecrystal).
    • Break down monolithic transactions into role-based and task-focused apps.
    • Enable a responsive experience across all devices.
  • SAP Fiori 2.0
    • Fiori 2.0 was launched in 2016 and implemented with SAPUI5 version 1.42 - 1.70.
    • New theme SAP Belize (theme ID sap_belize).
    • CoPilot:- connects content and services from different products.
    • SAP Fiori launchpad:- notifications, and improved navigation.
  • SAP Fiori 3
    • Fiori 3.0 was announced in 2018 and implemented with SAPUI5 version 1.70 and above.
    • New theme SAP Quartz Light (theme ID sap_fiori_3)
    • Integration of Cards: Delivering more content to the initial pages of the end-users.
    • Structure content:- Providing multiple home pages and sub-pages.
    • Fiori 3 design system has been extended beyond the established reference technology SAPUI5 and the classic UI technologies to include the latest web technologies based on frameworks like Angular, React or Vue, and Web Components.

Comments

Post a Comment

Popular posts from this blog

Exception handing in OData

By
Image
SAP provided below 2 Interfaces and 2 Classes to handle the exceptions in OData. /IWBEP/IF_MESSAGE_CONTAINER /IWBEP/IF_MGW_CONTEXT /IWBEP/CX_MGW_BUSI_EXCEPTION /IWBEP/CX_MGW_TECH_EXCEPTION     Example: DATA(lo_msg_container) = mo_context->get_message_container( ). SELECT SINGLE * FROM qals INTO @DATA(ls_qals) WHERE prueflos EQ @iv_prueflos.  IF sy-subrc NE 0. METOD 1: Just raise an exception but don't handle it (no parameters)          RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception.  The output will be as follows: Method 2: Using Message Container raising and handling the exceptions using the interface reference as importing parameter.       lo_msg_container->add_message_text_only(         EXPORTING           iv_msg_type = 'E'           iv_msg_text = |Inspection Lot { iv_prueflos } is invalid| ).       RAISE EXCEPTION TYPE /iwbep/cx_mgw_busi_exception         EXPORTING           message_container = lo_msg_container.     ENDIF. Method 3: BUSINESS_ERROR Raising and
Read more

ALV reort using CL_SALV_TABLE

By
Image
 REPORT ztest_pr.  TABLES: afko.  TYPES: BEGIN OF ty_final,           aufnr TYPE afko-aufnr,           matnr TYPE resb-matnr,           auart TYPE aufk-auart,           abjnr TYPE aufk-objnr,           aufpl TYPE afvc-aufpl,           aplzl TYPE afvc-aplzl,           vornr TYPE afvc-vornr,           arbid TYPE afvc-arbid,           steus TYPE afvc-steus,           objnr TYPE afvc-objnr,           stext TYPE bsvx-sttxt,         END OF ty_final.  DATA: lt_final TYPE TABLE OF ty_final,              ls_final TYPE ty_final.  DATA: lv_stext LIKE bsvx-sttxt.   SELECT-OPTIONS: s_aufnr FOR afko-aufnr. ******************************************************** * Class Definition ********************************************************  CLASS lc_salv DEFINITION.    PUBLIC SECTION.      METHODS: fetch_data,               create_salv_obj RAISING cx_static_check ,               display_toolbar,               set_layout,               set_column_attr RAISING cx_static_check,               event_handle_
Read more