sap fiori app library - TECHNICAL GYAN GURU https://technicalgyanguru.com All SAP information on 1 place Tue, 01 Oct 2024 06:48:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.2 https://technicalgyanguru.com/wp-content/uploads/2024/04/cropped-cropped-technical--32x32.png sap fiori app library - TECHNICAL GYAN GURU https://technicalgyanguru.com 32 32 Part IV: SAP Fiori Tutorial. How can I modify the Fiori Launch Pad’s default language if it’s not English? https://technicalgyanguru.com/part-iv-sap-fiori-tutorial-how-can-i-modify-the-fiori-launch-pads-default-language-if-its-not-english/?utm_source=rss&utm_medium=rss&utm_campaign=part-iv-sap-fiori-tutorial-how-can-i-modify-the-fiori-launch-pads-default-language-if-its-not-english https://technicalgyanguru.com/part-iv-sap-fiori-tutorial-how-can-i-modify-the-fiori-launch-pads-default-language-if-its-not-english/#respond Thu, 10 Oct 2024 06:22:00 +0000 https://technicalgyanguru.com/?p=4820 Learn how to change the default language in SAP Fiori Tutorial Launchpad with our step-by-step tutorial. Discover how to adjust language settings to suit your needs and ensure a seamless…

The post Part IV: SAP Fiori Tutorial. How can I modify the Fiori Launch Pad’s default language if it’s not English? first appeared on TECHNICAL GYAN GURU.

]]>
Learn how to change the default language in SAP Fiori Tutorial Launchpad with our step-by-step tutorial. Discover how to adjust language settings to suit your needs and ensure a seamless user experience. Ideal for customizing your Fiori environment for different language preferences.

German is the language of the SAP Fiori Launchpad. How can I translate it to English?

Review SAP Fiori Tutorial Part III: Three Flow Charts to get the idea of improving the standard Fiori apps. As an example, let’s say you work as a developer in the UK and are unexpectedly given a project that involves non-English speaking nations like Germany, France, Portugal, etc. You ask yourself, what’s the big deal?You could manage it because ABAP is a common language.

As a developer for Fiori, your first job is to figure out why users in the UK are seeing the Fiori Launchpad in German.

You access the client’s Citrix/VPN and notice the German log-on below.

Fiori Launchpad in German

You make a quick guess: it’s possible that German, DE-Deutsch, is the GUI Logon Pad’s default language. As a result, German appears in the Fiori Launchpad as well.

Let’s examine the SAP Logon Pad. You’re correct. Yes, DE (German) is the default language on the Logon Pad.

Free SAP Fiori Tutorial
How to change the default language of SAP

You continue to do this. By taking the actions listed below, you can set EN (English) as the default language.

It would request the confirmation listed below if you clicked OK. Press OK once again.

Free ABAP Training

Start the Logon Pad again now.

HANA ABAP Tutorial
Free SAPUI5 Training

That you finished the case in under two minutes makes you proud. Let’s take another look at the Fiori Launchpad. Since we have changed the default language in the SAP Logon Pad to EN, we anticipate that the language will also change to EN.

Fiori Launchpad in German

Whoops! It’s still in German on the Fiori Log On Pad.

The fiori launchpad and SAP Log On Pad are unrelated, we have learned. See Also: SAP Fiori Tutorial, Section I: Installation, Configuration, and System Check. you now acknowledge the gravity of the situation. After much searching, you eventually arrive at www.technicalgyanguru.com and discover this post.

The Internet Explorer (or Firefox/Chrome, etc.) default language determines the language that the Fiori Launch Pad displays by default.

The three steps listed below must be followed in order to modify Internet Explorer’s default language:

In Internet Explorer, click Tools.

How to change default Language of Internet Explorer
  1. Select the General Tab, then click Languages under Internet Options.
Fiori Default Language
  1. The German language would be displayed as the first choice. Simply use the arrows or the move up and down buttons to bring English—which isn’t the initial option—to the top.
SAP Fiori Tutorial Part IV

Click OK, OK, to restart the Fiori Launch Pad’s internet browser.

The sorcery was successful. The Fiori Launch Pad is now available in your native tongue. Fiori, which translates to “flower” in Italian, meaning “have fun.”

Ever desired to master SAP ABAP for HANA? but were unsure of where to begin? View these tutorials on ABAP for HANA.

Thus…How Do You Feel?

We would now like to speak with you.

What are your thoughts on this matter?You will undoubtedly run into a language barrier if you ever work on an international project whose execution is taking place across continents.We previously encountered translation problems with Adobe, SAPScripts, SmartForms, and ABAP reports. The Fiori Apps are now in the spotlight.

you may be interested in this blog here:-

Good Practices for Salesforce Maintenance and Optimization

Understanding and Addressing “FOR UPDATE” Lock Issues in MySQL

Navigating SAP’s E070 Table in SAP: The Heartbeat of Transport Management

The post Part IV: SAP Fiori Tutorial. How can I modify the Fiori Launch Pad’s default language if it’s not English? first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/part-iv-sap-fiori-tutorial-how-can-i-modify-the-fiori-launch-pads-default-language-if-its-not-english/feed/ 0 4820
Part V of the SAP Fiori Tutorial: Complete Implementation of the My Inbox – Purchase Order Approval System https://technicalgyanguru.com/part-v-of-the-sap-fiori-tutorial-complete-implementation-of-the-my-inbox-purchase-order-approval-system/?utm_source=rss&utm_medium=rss&utm_campaign=part-v-of-the-sap-fiori-tutorial-complete-implementation-of-the-my-inbox-purchase-order-approval-system https://technicalgyanguru.com/part-v-of-the-sap-fiori-tutorial-complete-implementation-of-the-my-inbox-purchase-order-approval-system/#respond Wed, 09 Oct 2024 06:53:00 +0000 https://technicalgyanguru.com/?p=4824 Master the end-to-end implementation of the My Inbox – Purchase Order Approval app in SAP Fiori with our comprehensive tutorial. Follow step-by-step instructions to configure and deploy the app, enhancing…

The post Part V of the SAP Fiori Tutorial: Complete Implementation of the My Inbox – Purchase Order Approval System first appeared on TECHNICAL GYAN GURU.

]]>
Master the end-to-end implementation of the My Inbox – Purchase Order Approval app in SAP Fiori with our comprehensive tutorial. Follow step-by-step instructions to configure and deploy the app, enhancing your purchase order approval process. Perfect for achieving seamless integration and improved workflow efficiency.

My Inbox App
SAP Fiori Library
My Inbox PO Approval App

My Inbox – Completed Purchase Orders

What should you take into account when creating a Fiori app?
Searching the Fiori Library, which is the Fiori Apps equivalent of the Bible or warehouse, is the first task.

I must first verify it in the Fiori library in order to fulfill my requirement, which is to develop the Purchase Order Approval App. If I get it, I’m lucky.

  1. Verify that the Release Strategy functions in the Backend Server as intended.

Look it up on the Fiori Library app store.

Locate the SAPUI5 Application in Configuration and note its technical name: CA_FIORI_INBOX

Verify the system version for which you need to construct the app under Implement Information.

CA_FIORI_INBOX

Have you played Fiori From Space Level?

Let’s examine what has to be done on these backend and front end servers.

Activate the Sicf service by going to the front end server: ca_fiori_inbox->sap->bc->ui5_ui5 and sicf->default_host->sapturn on

activate the sicf service

4. In the setup, observe the OData Service

/IWPGW/TASKPROCESSING

That is all. We possess the names of the frontend and backend services. Proceed to the front end server and utilize the Tcode: /IWFND/MAINT_SERVICE to enable the odata services. When enabling the services, kindly check the System Aliases.

/IWFND/MAINT_SERVICE

Verify your system’s alias. IW_PGW should be the system alias (extremely crucial).

  1. An RFC connection ought to be used to connect the gateway server and the back-end server.
  2. Back-end Server: My Workflow is now required to take center stage.

Like any other approval procedure, PO Approval depends on the workflow being operational. Nothing will function without it, so don’t bother with the app.

Now let’s experiment with workflow!

SAP Netweaver -> Content -> Workflow Settings -> Gateway Service Enablement ->Task Filter Activation->Deactivation

SAP Netweaver -> Gateway Service Enablement -> Content -> Workflow Configuration -> Preserve Task Names and Choices

standard workflow for po release

To define the decisions, i.e., the approve and reject buttons, click Decision Keys.

Gateway Server: Set up your gateway system’s workflow scenario.

Choose Task Gateway Service->Scenario Definition under Gateway Service Enablement -> Content in SAP NetWeaver.

Task Gateway Service

Choose an entry and give the customer a role.

decision keys for my inbox wf

Select a Task to Assign to SAP System Alias under Task Definitions.

Assign a Role to Consumer.

Front end server approvals

Go to the PFCG, make a Zrole, and select the default authorization.

ID for the program: R3TR
Type of object: IWSG Services: as displayed below: and duplicate.All of these Odata Services ought to be available to the user.

Obj. Type : IWSG

9 Attach Catalog to the Role in PFCG

The standard catalogue must to be accessible to the management as well. Check out the Fiori Library’s regular catalogue role.

SAP_FND_BC_MANAGER_T
catalog in fiori
Role Menu

Workflow, services, and roles are all operational, as are the frontend and backend servers.

Please make sure the following are set up for Fiori Launchpad.

Find the standard catalog at the Fiori Library.

11 Find the Catalogue name at the Frontend Server using Tcode /n/UI2/FLPD_CUST.

/n/UI2/FLPD_CUST

Take notice of every parameter that the standard has already included in the Tiles!

To learn more about Groups, Catalogs, and Tiles, please read through the SAP Fiori Implementation Exercise from beginning to end.

Fiori Launchpad: /UI2/FLP – Designer for Fiori Launchpad

/UI2/FLP
Fiori Launchpad Designer

Select Plus Button

Manager approver(Cross) - Content

Group Home will now have your app launcher added to it. Press the Pencil button.

Manager approver(Cross) - Content

Select My Inbox to get started. All of the settings and configurations are finished. The purchase order is ready for approval using the My Inbox App. POs in their queues would be visible to managers who have the appropriate roles.

My Inbox App

The technical procedures for handling workflow, configuring services, and activating them are finished. However, please read the additional instructions below if you wish to enhance the beauty of your flower (fiori) even further.

While not necessary, these are nonetheless nice to haves. After all, you and other people ought to vary in some way.

  1. Theme Designer: To customize your application

Make a call from the frontend server to Tcode /ui5/theme designer.You will see this screen after logging in.

/ui5/theme_designer

Click SAP_Bluecrystal twice. Paste the Fiori Launchpad URL into the URL to Application field. Give the application a name, then select Add.

SAP Fiori Theme Designer

You can add the backdrop color and background photos in the right panel.

Theme Designer

when the embellishment and personalization are completed. Select Theme, Save, and Build.

theme->save and build

Save

The new Theme would be connected to our Fiori App.Navigate to tcode/n/ui5/ theme_tool on the front end server, then select Info.

/ui5/ theme_tool

Look it over!

I believe this post will be useful to you as you set up the Fiori My Inbox app. It should also be possible for you to modify the Fiori Apps’ theme. Feel free to contact me if you run across any problems. I always try to respond to all of the questions that are posed to me.

you may be interested in this blog here:-

How can I see the values ​​of variables in OpenSolver as they change?

How the Digital Services Act is Shaping the Future of the SAP Community

सेल्सफोर्स सैंडबॉक्स और उनके प्रकारों का परिचय

The post Part V of the SAP Fiori Tutorial: Complete Implementation of the My Inbox – Purchase Order Approval System first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/part-v-of-the-sap-fiori-tutorial-complete-implementation-of-the-my-inbox-purchase-order-approval-system/feed/ 0 4824
Display & Download PNG JPG PDF Document in SFiori Client Android with 3rd Party App for Zoom/additional options https://technicalgyanguru.com/display-download-png-jpg-pdf-document-in-sfiori-client-android-with-3rd-party-app-for-zoom-additional-options/?utm_source=rss&utm_medium=rss&utm_campaign=display-download-png-jpg-pdf-document-in-sfiori-client-android-with-3rd-party-app-for-zoom-additional-options https://technicalgyanguru.com/display-download-png-jpg-pdf-document-in-sfiori-client-android-with-3rd-party-app-for-zoom-additional-options/#respond Tue, 08 Oct 2024 06:12:00 +0000 https://technicalgyanguru.com/?p=4828 Learn how to display and download PNG, JPG, and PDF documents in the SAP Fiori Client on Android. This guide covers using a third-party app for zooming and accessing additional…

The post Display & Download PNG JPG PDF Document in SFiori Client Android with 3rd Party App for Zoom/additional options first appeared on TECHNICAL GYAN GURU.

]]>
Learn how to display and download PNG, JPG, and PDF documents in the SAP Fiori Client on Android. This guide covers using a third-party app for zooming and accessing additional options for a seamless document handling experience. Ideal for enhancing your mobile document management capabilities.

Fiori Client’s Zoom Options

How can ZOOM options be brought in?
What is the process for opening a document using a third-party application?

The built-in Fiori Client attachment plugin, is the answer.

The code snippet to accomplish the functionality is shown below.

  1. Display the document

Put the code below on the unified uploader’s change event.

var oCore = sap.ui.getCore();
var oFile = oEvent.oSource.oFileUpload.files[0];
if (oFile) {
var vPath = URL.createObjectURL(oFile);
try {
if (oFile.type == "application/pdf") {
// For mime type PDF this below code invokes adobe reader
var reader = new FileReader();
reader.readAsDataURL(oFile);
reader.onload = function() {
window.open(reader.result);
};
reader.onerror = function(error) {
sap.m.MessageToast
.show("Unable to open file");
};
} else {
// For mime type JPG PNG this below code invokes gallery
window.open(vPath);
}
} catch (e) { // Error in case of any failures to be catched }

2. View the document after downloading from Getstream.

try {
window
.open(encodeURI("/sap/opu/odata/Service/AttachSet(Property1='"
+ vValue1
+ "',Property2='"
+ vValue2
+ "')/$value"));
} catch (e) { // Error in case of any failures to be catched }

Shots showing how to operate it.

Launch the Fiori Client App.

Select on browse button

Select an image that requires the user to enlarge before proceeding with any actions.

Zoom options will be accessible as soon as the file uploader’s change function is called.

Select a PDF file to open the PDF app and access the zoom features

See Also: Complete Guide for My Inbox PO Approval Application

Likewise, if you need to use Getstream to open the Adobe Reader or gallery/in-app window. Utilize the download feature. The associated app is automatically invoked based on the backend’s mime type.

I think this post will give you the guidance you need to activate and call the appropriate Zoom feature routines. Please feel free to contact me or post your questions in the comments area below if you need any additional information or if you have any more questions.

you may be interested in this Blog here:-

SAP S/4HANA Cloud Public Edition 2408: A Comprehensive Guide to Product Implementation

5 Methods for Using Your Salesforce Email Sender Reputation: An Story of Redemption

The post Display & Download PNG JPG PDF Document in SFiori Client Android with 3rd Party App for Zoom/additional options first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/display-download-png-jpg-pdf-document-in-sfiori-client-android-with-3rd-party-app-for-zoom-additional-options/feed/ 0 4828
OOP Report Applying ALV Tree Combination and Splitter https://technicalgyanguru.com/oop-report-applying-alv-tree-combination-and-splitter/?utm_source=rss&utm_medium=rss&utm_campaign=oop-report-applying-alv-tree-combination-and-splitter https://technicalgyanguru.com/oop-report-applying-alv-tree-combination-and-splitter/#respond Sun, 06 Oct 2024 09:47:00 +0000 https://technicalgyanguru.com/?p=5200 We had to create a report using splitter containers and a ALV tree structure per a client request. Although handling the combination of these two may seem challenging, it is…

The post OOP Report Applying ALV Tree Combination and Splitter first appeared on TECHNICAL GYAN GURU.

]]>
ALV Tree

We had to create a report using splitter containers and a ALV tree structure per a client request. Although handling the combination of these two may seem challenging, it is actually rather simple. We quickly constructed a prototype, and it was flawless.

The basic programming skeleton of the prototype described below can be improved in a number of ways, but it should not change. We discovered certain hotly debated subjects online as we developed, and I’ve tried to hone in on them and address them in this piece.

Goal

This article’s goal is to clarify the usage of the TREE MODEL (TREE_STRUCTURE) and SPLITTER CONTAINER in OOPs ABAP report generation that integrates standard events.

The second, and more significant goal, is to permanently dispel our phobia of using Splitter Containers and Tree Models.

Range

  • This article addresses the following typical issues that developers run into:
  • When divided into many sub-containers, the custom container can be used to fill the entire screen.
  • Registering custom events using the tree model’s standard events
  • Customize splitter container widths.

Overview

The report with two containers in the list screen is displayed using the code that follows. The tree model is intended to be contained in the left panel container, while the contents of the left panel document will be displayed in the right container in response to a double click. This example shows how to design a tree structure using sales orders and sales contracts as the antecedent documents. Certain selection screen criteria can be applied to these sales orders in order to choose them. When the leaf node is clicked, the system will show the sales order data in the appropriate container in an ALV format (fig. 1).

Tree ALV

fig. – 1

Program Structure

Step I: Declare all necessary tables and structures
Step II: Declare the references to the different classes
Step III: Event class definition
Step IV: Putting the Event Class into Practice
Step V: The Choosing Screen
Step-VI: Subroutine to obtain the fundamental data for the tree model
Step VII: Design of the Screen
Step VIII: Module for creating different classes of objects. (In the output screen’s PBO)
Step IX: The event registration module. (In the output screen’s PBO)
Step X: The output processing module. (In the output screen’s PBO)

Step-I: Declare all required structures and tables

Tables: vbak,vbap,vbfa.

*&---------------------------------------------------------------------*
*&            Structures and Table Declarations
*&---------------------------------------------------------------------*
Data: ls_vbak type vbak,
lt_vbak type table of vbak,
ls_vbap type vbap,
lt_vbap type table of vbap.

Types: begin of ty_vbfa,
vbelv type vbfa-vbelv, "Preceding SD Document
posnv type vbfa-posnv, "Preceding SD Document Item Number
vbeln type vbfa-vbeln, "Subsequent SD Document
posnn type vbfa-posnn, "Subsequent SD Document Item Number
vbtyp_n type vbfa-vbtyp_n, "Subsequent Document Category
vbtyp_v type vbfa-vbtyp_v, "Preceding Document Category
end of ty_vbfa.

Data: ls_vbfa type ty_vbfa,
lt_vbfa type table of ty_vbfa.

Data: ls_vbfa_copy type ty_vbfa,
lt_vbfa_copy type table of ty_vbfa.

Types: begin of ty_vbak,
vbeln type vbak-vbeln,  "Contract Number
audat type vbak-audat,  "Document Date
ernam type vbak-ernam,  "Name of Person who Created the Object
auart type vbak-auart,  "Sales Document Type
end of ty_vbak.

Data: ls_vbak_cont type ty_vbak,
lt_vbak_cont type table of ty_vbak.

Step II: Declare the references to the different classes

*&---------------------------------------------------------------------*
*&            Type Reference of Various Classes
*&---------------------------------------------------------------------*
Data: ref_split type ref to cl_gui_splitter_container,
ref_cust  type ref to cl_gui_custom_container,
ref_alv1  type ref to cl_gui_alv_grid,
ref_alv2  type ref to cl_gui_alv_grid,
ref_cont1 type ref to cl_gui_container,
ref_cont2 type ref to cl_gui_container.
Data: ref_tree  type ref to cl_simple_tree_model.

Step – III: Definition of event class

*&---------------------------------------------------------------------*
*&                       Event Class
*&---------------------------------------------------------------------*
class lcl_event_handler definition.
public section.
methods: node_dc for event node_double_click of cl_simple_tree_model
importing node_key sender.
endclass.

Step – IV: Implementation of Event Class

class lcl_event_handler implementation.
method: node_dc.

Data: lt_children type tm_nodekey,
v_so        type vbeln,
v_item      type posnr.

Data: ls_layout type lvc_s_layo.
* 'sender' is an implicit event parameter that is provided by
* ABAP Objects runtime system. It contains a reference to the
* object that fired the event. You may directly use it to
* call methods of this instance.

CALL METHOD SENDER->NODE_GET_LAST_CHILD
EXPORTING
NODE_KEY       = node_key
IMPORTING
CHILD_NODE_KEY = lt_children.

* ‘Level_count’ in expand_node method determines in which level of the tree
* we want the double_click method to be triggered.

if lt_children is not initial.
CALL METHOD SENDER->EXPAND_NODE
EXPORTING
NODE_KEY            = node_key
LEVEL_COUNT         = 2.
endif.

split node_key at space into v_so v_item.

refresh: lt_vbap.

select * from vbap
into table lt_vbap
where vbeln = v_so.

if sy-subrc = 0.

ls_layout-grid_title = text-002.
ls_layout-zebra      = 'X'.
ls_layout-smalltitle = ''.
ls_layout-cwidth_opt = 'X'.

CALL METHOD REF_ALV2->SET_TABLE_FOR_FIRST_DISPLAY
EXPORTING
I_STRUCTURE_NAME              = 'VBAP'
IS_LAYOUT                     = ls_layout
CHANGING
IT_OUTTAB                     = lt_vbap.

CALL METHOD REF_ALV2->REFRESH_TABLE_DISPLAY.

endif.

endmethod.
endclass.

Step – V:  Selection Screen

*&---------------------------------------------------------------------*
*&                   Selection Screen
*&---------------------------------------------------------------------*
selection-screen: begin of block b1 with frame title text-001.
select-options: s_vbeln for vbak-vbeln, "Document Number
s_audat for vbak-audat, "Document Date
s_ernam for vbak-ernam. "Name who Created the Object
selection-screen: end of block b1.

Step-VI: Subroutine to obtain the fundamental data for the tree model

*&---------------------------------------------------------------------*
*&                   Start Of Selection
*&---------------------------------------------------------------------*
start-of-selection.
perform Get_Data.

*&---------------------------------------------------------------------*
*&      Form  GET_DATA
*&---------------------------------------------------------------------*
*       Get All the display relevant Data for Tree Structure
*----------------------------------------------------------------------*
FORM GET_DATA .

select vbeln audat ernam auart
from vbak
into table lt_vbak_cont
where vbeln in s_vbeln and
audat in s_audat and
ernam in s_ernam.

if sy-subrc <> 0.
message E001(ZMSG) with 'No Record Found' display like 'I'.
elseif sy-subrc = 0.

select vbelv posnv vbeln posnn vbtyp_n vbtyp_v
from vbfa
into table lt_vbfa
for all entries in lt_vbak_cont
where vbelv = lt_vbak_cont-vbeln and
vbtyp_n = 'C' and
vbtyp_v = 'G'.

if lt_vbfa is initial.
message E002(ZMSG) with 'No Subsequent Record Found' display like 'I'.
else.
select * from vbak
into table lt_vbak
for all entries in lt_vbfa
where vbeln = lt_vbfa-vbeln.

select * from vbap
into table lt_vbap
for all entries in lt_vbak
where vbeln = lt_vbak-vbeln.

endif.
endif.
ENDFORM.

Step – VII: Screen Design

call screen 0100.
Splitter Container

* The container should be drawn as large as possible. Also, the Lines/columns in the attributes tab of the screen painter are to be filled with the value 240 to get the full-screen splitter container.

OOPs ALV Report

Step – VIII: Module for object creation of various classes. (In PBO of output screen)

Create one module in the flow logic of the screen.

*&---------------------------------------------------------------------*
*&      Module  OBJECT_CREATION  OUTPUT
*&---------------------------------------------------------------------*
*       Object Creation for Classes
*----------------------------------------------------------------------*
MODULE OBJECT_CREATION OUTPUT.

CREATE OBJECT REF_CUST
EXPORTING
CONTAINER_NAME    = 'SPLIT_CONT'.

CREATE OBJECT REF_SPLIT
EXPORTING
PARENT            = ref_cust
ROWS              = 1
COLUMNS           = 2.

CALL METHOD REF_SPLIT->GET_CONTAINER
EXPORTING
ROW       = 1
COLUMN    = 1
RECEIVING
CONTAINER = ref_cont1.

The SET_COLUMN_WIDTH method can be used to change the splitter container’s width. As needed, pass the breadth.

CALL METHOD REF_SPLIT->SET_COLUMN_WIDTH
EXPORTING
ID                = 1
WIDTH             = 22.

CALL METHOD REF_SPLIT->GET_CONTAINER
EXPORTING
ROW       = 1
COLUMN    = 2
RECEIVING
CONTAINER = ref_cont2.

CREATE OBJECT REF_TREE
EXPORTING
NODE_SELECTION_MODE   = cl_simple_tree_model=>node_sel_mode_single.

CALL METHOD REF_TREE->CREATE_TREE_CONTROL
EXPORTING
PARENT                = ref_cont1.

CREATE OBJECT REF_ALV2
EXPORTING
I_PARENT  = ref_cont2.

ENDMODULE.                 " OBJECT_CREATION  OUTPUT

Step – IX: Module for event registration. (In PBO of output Screen)

ALV Tree
*&---------------------------------------------------------------------*
*&      Module  EVENT_REGISTRATION  OUTPUT
*&---------------------------------------------------------------------*
*       Double Click Event Registration

*§4a. Frontend registration(i):  get already registered tree events.
*................................................................
* The following four tree events registers ALV Tree in the constructor
* method itself.
*    - cl_gui_column_tree=>eventid_expand_no_children
* (needed to load data to frontend when a user expands a node)
*    - cl_gui_column_tree=>eventid_header_context_men_req
* (needed for header context menu)
*    - cl_gui_column_tree=>eventid_header_click
* (allows selection of columns (only when item selection activated))
*   - cl_gui_column_tree=>eventid_item_keypress
* (needed for F1-Help (only when item selection activated))
*
* Nevertheless you have to provide their IDs again if you register
* additional events with SET_REGISTERED_EVENTS (see below).
* To do so, call first method  GET_REGISTERED_EVENTS (this way,
* all already registered events remain registered, even your own):

* (If you do not these events will be deregistered!!!).
* You do not have to register events of the toolbar again.
*----------------------------------------------------------------------*
MODULE EVENT_REGISTRATION OUTPUT.
Data: lt_events type cntl_simple_events,
ls_event type cntl_simple_event.

Data: event_handler type ref to lcl_event_handler.

CALL METHOD REF_TREE->GET_REGISTERED_EVENTS
IMPORTING
EVENTS = lt_events.

ls_event-eventid = cl_simple_tree_model=>eventid_node_double_click.
append ls_event to lt_events.

CALL METHOD REF_TREE->SET_REGISTERED_EVENTS
EXPORTING
EVENTS                    = lt_events.

create object event_handler.
set handler event_handler->node_dc for ref_tree.

ENDMODULE.                 " EVENT_REGISTRATION  OUTPUT

Step – X: Module for output processing. (In PBO of output Screen)

OOPs ALV for Hierarchy Tree
*&---------------------------------------------------------------------*
*&      Module  PROCESSING_OUTPUT  OUTPUT
*&---------------------------------------------------------------------*
*       Processing Output of the Table
*----------------------------------------------------------------------*
MODULE PROCESSING_OUTPUT OUTPUT.

Data: ls_node type treemsnodt.

CALL METHOD REF_TREE->ADD_NODE
EXPORTING
NODE_KEY                = 'ROOT'
ISFOLDER                = 'X'
TEXT                    = 'Orders'
EXPANDER                = 'X'.

loop at lt_vbak into ls_vbak.

ls_node-node_key = ls_vbak-vbeln.

concatenate 'Sales Order#' ':' ls_vbak-vbeln
into ls_node-text
separated by space.

CALL METHOD REF_TREE->ADD_NODE
EXPORTING
NODE_KEY                = ls_node-node_key
RELATIVE_NODE_KEY       = 'ROOT'
RELATIONSHIP            = cl_simple_tree_model=>relat_last_child
ISFOLDER                = 'X'
TEXT                    = ls_node-text
EXPANDER                = 'X'.

endloop.

loop at lt_vbap into ls_vbap.

concatenate ls_vbap-vbeln ls_vbap-posnr
into ls_node-node_key
separated by space.

ls_node-relatkey = ls_vbap-vbeln.

concatenate ls_vbap-posnr ls_vbap-matnr
into ls_node-text
separated by space.

CALL METHOD REF_TREE->ADD_NODE
EXPORTING
NODE_KEY                = ls_node-node_key
RELATIVE_NODE_KEY       = ls_node-relatkey
RELATIONSHIP            = cl_simple_tree_model=>relat_last_child
ISFOLDER                = ''
TEXT                    = ls_node-text
EXPANDER                = ''.

endloop.
ENDMODULE.                 " PROCESSING_OUTPUT  OUTPUT

Change the design, but feel free to copy or refer to the included code. I would prefer to advise using the local class to help construct the complete report, or at the very least, using some modularization techniques. I utilized several PBO modules, which is strongly discouraged for any real-time object.

There are numerous different methods for creating tree topologies. There are a ton of documents available online. I chose the most straightforward method (the class name is, ironically, “cl_simple_tree_model”).Splitter containers have been extensively studied, although they are rarely utilized unless there are very particular needs.But all this claim is “Old wine in a new bottle,” that is all. I hope this eliminates our reluctance to use tree models and splitter containers.

alv reports in sap abap, alv report in sap abap, interactive alv report in sap abap, what is alv report in sap abap, alv full form in computer, alv full form in sap, alv full form
OOPs ABAP Tutorial
Selection Screen
Output Items on Screen
Increased List

Every post we write is the result of extensive planning, testing, and writing.It would be greatly appreciated by our team if you could forward this link to at least five friends or coworkers who you believe would find our content useful.In order to benefit everyone, keep our staff engaged, and ensure that our effort is not lost in the vast internet, we want our articles to be seen by as many people as possible.

Salesforce training modules

A World of History and Culture: Exploring the Past

The post OOP Report Applying ALV Tree Combination and Splitter first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/oop-report-applying-alv-tree-combination-and-splitter/feed/ 0 5200
SAP Fiori Tutorial. Part VI. How to Troubleshoot SAP Fiori Errors? https://technicalgyanguru.com/sap-fiori-tutorial-part-vi-how-to-troubleshoot-sap-fiori-errors/?utm_source=rss&utm_medium=rss&utm_campaign=sap-fiori-tutorial-part-vi-how-to-troubleshoot-sap-fiori-errors https://technicalgyanguru.com/sap-fiori-tutorial-part-vi-how-to-troubleshoot-sap-fiori-errors/#respond Sat, 05 Oct 2024 06:12:00 +0000 https://technicalgyanguru.com/?p=4836 SAP Fiori Tutorial, It is one thing to grasp the idea and possess theoretical understanding of any technology; it is quite another to put that knowledge to use solving problems…

The post SAP Fiori Tutorial. Part VI. How to Troubleshoot SAP Fiori Errors? first appeared on TECHNICAL GYAN GURU.

]]>

SAP Fiori Tutorial, It is one thing to grasp the idea and possess theoretical understanding of any technology; it is quite another to put that knowledge to use solving problems in real time.It is not enough to be good at racing games and expect to be a Formula 1 champion. Analyzing technical problems during Fiori App configuration can also be a little challenging and time-consuming if you haven’t worked directly on real applications.

But don’t be alarmed. I, Sumit from Invenio, am here to save the day for you!

While working on intricate real-world projects involving Fiori applications, I will attempt to assist application developers (ABAP and Frontend specialists) in comprehending and using various troubleshooting tools and techniques to speed up their analysis.

When configuring any configuration, we will verify the most frequently occurring error.

How to Trouble Shoot Fiori Errors

Since SAP Fiori development involves a number of infrastructure components, including back-end, front-end (gateway), web dispatched, UI application, etc., resolving such issues can be difficult, annoying, and time-consuming for novices. Furthermore, problems may arise in any of these elements.

So, the crucial query is:

Where do we begin when debugging Fiori problems?

In order to initiate front-end debugging and determine whether problems are present in the front-end or back-end components, developers frequently start by using the Well-Known Function Key F12 (or right-clicking and choosing INSPECT in the browser where the Fiori App is running). There are no problems shown in the console in our sample.

Tips to Debug

2 Verifying whether there are any errors in SAP Gateway is the next step. Depending on your gateway deployment method (Hub or Embedded), it could be your front-end or back-end system.

Use transaction “/IWFND/ERROR_LOG” to confirm whether Gateway Services has received any error log reports.

Thankfully, there have been no reported issues in this instance.

Gateway Services errors

In the SAP Fiori launchpad, the next step is to use transaction “/UI2/FLIA” to verify that a provided INTENT (semantic object – action pair) has been assigned to a USER.

For a user, this report offers a summary of all of their intents. It lets you see which authorization role the purpose belongs to and whether a specific person is allocated to it.

The report’s results can be filtered according to the type of device (desktop, mobile, etc.).

The personalization layer is the default layer.

The check depends on the system. Launch the report in the system whose content you wish to check.

Check to see whether “Configuration error” for semantic “ZMat” and action “Create” exists.In this

INTENT error in SAP Fiori
Fiori App analysis

After that, see if there is a “Customization error” for the Action “Create” and the Semantic “ZMat“.The customization error in this instance is reported as follows.

fiori configuration issue
fiori customizing issue

To examine the error message in more detail, select the error and then click Display.

analyse fiori issues

Detailed Error Message: “Launchpad ZMM / transaction / ZMM01 does not exist in client 800”.

Detailed error message in SAP Fiori

Transaction “/UI2/FLP_CONTCHECK” is another tool that developers may utilize to confirm Fiori Launchpad content. Here, developers can filter programs using packages. Let’s examine it more closely.

Personalizing error in SAP Fiori
Personalizing error in SAP Fiori apps

Developers can also use transaction “/UI2/FLP_CONTCHECK” to verify Fiori Launchpad content.

Developers can use packages to filter apps here. Let’s give it a closer look.

/UI2/FLP_CONTCHECK

Under Configuration for Custom App ZMM, no errors have been recorded.

Error in customizing in SAP Fiori Apps

Verify the Customization aspect as well. The error message for the Catalog ZMM, which powers our unique application, is displayed below.

Customization Fiori issue
troubleshooting sap fiori apps

In this case, it is the same error that was encountered in Step 3.

detailed error message.

See Also: Complete SAP ABAP for S/4HANA Tutorials

We now know the problem, more or less. Now is the moment to put an end to it and win the day!

Let’s investigate the meaning behind Launchpad Role “ZMM” and Launchpad Instance “transaction” alias “ZMM01”. The Launchpad role and instance that you set up in transaction “LPD_CUST” are the same.

LPD_CUST shows that both Role and Instance are kept alive.What’s wrong if the Role and Instance are configured?

LPD_CUST that both Role and Instance

Keep in mind that Target Mapping defines the launchpad role and instance, which may be accessed using transaction /n/UI2/FLPD_CUST (Fiori launchpad designer).

After choosing the Target Mapping, select “Configure.””.

Target Mapping
Fiori launchpad designer Target Mapping

It is obvious that Target Mapping maintains Role and Instance.

What then is the problem?

Where in the configuration are we making mistakes?

To unravel this mystery, you’ll need Sherlock Holmes’s powers of observation.

Semantic mapping and launchpad settings may be closely compared, and you’ll see that the instance is kept in Lower case Target Mapping (see screenshot above).We must keep it exactly as per the LPD_CUST setting in the same scenario.

Let’s make the modification to uppercase.

Much ado about nothing.

Save and open the app again. Success! It was successful!

You may think the error is a monster when you receive it. However, you could think it’s all for nothing once you understand the underlying problem. For the majority of typical problems, this is true. When we know the answer, the problem always seems really straight forward.

Coding and programming the fix is simple, as we often say. The majority of the work and time is spent determining the source and fundamental cause.

you may be interested in this Blog here:-

When Did I First Hear About SAP? A Journey Through Discovery

How can I change the color of the Langchain output agent ?

Making Your First Salesforce Appexchange: A Complete Strategy

The post SAP Fiori Tutorial. Part VI. How to Troubleshoot SAP Fiori Errors? first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/sap-fiori-tutorial-part-vi-how-to-troubleshoot-sap-fiori-errors/feed/ 0 4836
Part 11 of Core Data Services: How Do I Use CDS View in the KPI Fiori Apps for Smart Business Services? https://technicalgyanguru.com/part-11-of-core-data-services-how-do-i-use-cds-view-in-the-kpi-fiori-apps-for-smart-business-services/?utm_source=rss&utm_medium=rss&utm_campaign=part-11-of-core-data-services-how-do-i-use-cds-view-in-the-kpi-fiori-apps-for-smart-business-services https://technicalgyanguru.com/part-11-of-core-data-services-how-do-i-use-cds-view-in-the-kpi-fiori-apps-for-smart-business-services/#respond Fri, 04 Oct 2024 06:05:00 +0000 https://technicalgyanguru.com/?p=4856 In the modern landscape of business intelligence and enterprise resource planning, leveraging Core Data Services (CDS) views within Key Performance Indicator (KPI) Fiori apps offers a transformative approach to data…

The post Part 11 of Core Data Services: How Do I Use CDS View in the KPI Fiori Apps for Smart Business Services? first appeared on TECHNICAL GYAN GURU.

]]>
In the modern landscape of business intelligence and enterprise resource planning, leveraging Core Data Services (CDS) views within Key Performance Indicator (KPI) Fiori apps offers a transformative approach to data management and analysis. This guide delves into how to effectively utilize CDS views in KPI Fiori apps for Smart Business Services, ensuring that your organization maximizes the potential of its data assets.

Understanding Core Data Services (CDS) Views

Core Data Services (CDS) are a framework provided by SAP for defining and consuming semantically rich data models. Unlike traditional database views, CDS views are designed to provide a higher level of abstraction and integrate seamlessly with SAP HANA’s advanced capabilities. They are essential for enabling real-time analytics and creating robust data models.

Key Features of CDS Views:

  1. Semantic Layer: CDS views offer a layer of abstraction that describes the data in a business context, making it easier to interpret and use.
  2. Performance Optimization: Built-in capabilities for performance optimization such as data buffering and aggregation.
  3. Reusability: CDS views can be reused across various applications, reducing redundancy and ensuring consistency.

Integrating CDS Views with KPI Fiori Apps

Key Performance Indicators (KPIs) are critical for monitoring the health and performance of business processes. Fiori apps, with their user-friendly interface and real-time capabilities, provide a powerful platform for visualizing and interacting with KPIs. Integrating CDS views with KPI Fiori apps involves several key steps:

1. Defining CDS Views

To start, you need to define the CDS views that will serve as the data source for your KPIs. These views should encapsulate the relevant metrics and dimensions necessary for performance tracking.

Steps to Define CDS Views:

  • Identify Requirements: Determine the specific KPIs and the data requirements for each. This includes understanding the key metrics, dimensions, and any necessary calculations.
  • Create CDS Views: Use the SAP HANA Studio or Eclipse to define your CDS views. Utilize CDS annotations to enhance functionality, such as defining analytical capabilities or specifying data aggregations.
sqlCopy code@AbapCatalog.sqlViewName: 'ZMYKPI_VIEW'
@EndUserText.label: 'My KPI View'
define view Z_MY_KPI_VIEW as select from some_table {
    key field1,
    field2,
    sum(field3) as total_field3
}
group by field1, field2

2. Exposing CDS Views as OData Services

CDS views need to be exposed as OData services to be consumed by Fiori apps. This step bridges the gap between the backend data models and the frontend user interface.

Steps to Expose CDS Views:

  • Create OData Service: Use SAP Gateway to create an OData service based on your CDS views. This involves defining the service, mapping the CDS view fields to the OData properties, and configuring any necessary metadata.
  • Activate Service: Ensure that the OData service is activated and available for consumption. This is typically done through the SAP Gateway Service Builder (transaction SEGW).
abapCopy code@OData.publish: true
define view Z_MY_KPI_ODATA as select from Z_MY_KPI_VIEW {
    field1,
    field2,
    total_field3
}

3. Configuring KPI Tiles in Fiori Launchpad

With your OData service in place, the next step is to configure KPI tiles within the Fiori Launchpad. This involves defining how the KPIs are displayed and interacted with by end users.

Steps to Configure KPI Tiles:

  • Create KPI Tile: Use the Fiori Launchpad Designer to create and configure KPI tiles. Specify the OData service as the data source and configure properties such as target values, thresholds, and visual representation.
  • Set Up KPI Tile Properties: Define how the KPI values are calculated and displayed. This includes setting up alerts for threshold breaches and ensuring the KPI tiles provide actionable insights.
jsonCopy code{
    "type": "KPI",
    "dataSource": "/sap/opu/odata/sap/Z_MY_KPI_ODATA/",
    "targetValue": {
        "value": "total_field3",
        "format": "Number"
    },
    "thresholds": [
        {
            "value": "1000",
            "color": "Red"
        },
        {
            "value": "500",
            "color": "Yellow"
        }
    ]
}

4. Testing and Validation

Before rolling out your KPI Fiori apps, thorough testing is essential to ensure that the KPIs are accurate and the data is represented correctly.

Testing Checklist:

  • Data Accuracy: Verify that the data in the KPI tiles matches the data from the CDS views.
  • Performance: Test the performance of the OData service and KPI tiles to ensure they meet performance benchmarks.
  • User Experience: Validate the usability of the KPI tiles in the Fiori Launchpad. Ensure they are intuitive and provide clear, actionable insights.

5. Continuous Monitoring and Improvement

Post-deployment, it’s crucial to continuously monitor and refine your KPIs and CDS views. This ensures that the KPIs remain relevant and the data continues to meet business needs.

Continuous Improvement Strategies:

  • Monitor Performance: Regularly review the performance of KPI tiles and OData services. Optimize as necessary to maintain responsiveness and accuracy.
  • Update KPIs: Adjust KPIs based on evolving business objectives and user feedback.
  • Enhance Data Models: Refine CDS views to incorporate new business logic or data requirements as they emerge.

Best Practices for Using CDS Views in KPI Fiori Apps

To maximize the benefits of integrating CDS views with KPI Fiori apps, adhere to the following best practices:

  1. Ensure Data Quality: High-quality data is essential for accurate KPIs. Regularly audit and cleanse data to maintain integrity.
  2. Optimize Performance: Use efficient CDS view definitions and optimize OData services to ensure swift data retrieval and presentation.
  3. User-Centric Design: Focus on user experience by designing KPI tiles that are intuitive and provide clear, actionable insights.
  4. Documentation: Maintain thorough documentation of CDS views, OData services, and KPI configurations to facilitate easier maintenance and troubleshooting.

Conclusion

Integrating CDS views with KPI Fiori apps for Smart Business Services empowers organizations to harness the full potential of their data. By following the outlined steps and best practices, businesses can achieve enhanced visibility into performance metrics, drive better decision-making, and ultimately, foster improved operational efficiency.

Embracing this approach not only aligns with modern data management principles but also sets the stage for continued innovation and success in an increasingly data-driven world.

you may be interested in this blog here:-

Benefits of Using Salesforce Nonprofit Cloud for Event Planing

ABAP for SAP HANA. ALV Report On SAP HANA – Opportunities And Challenges

The post Part 11 of Core Data Services: How Do I Use CDS View in the KPI Fiori Apps for Smart Business Services? first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/part-11-of-core-data-services-how-do-i-use-cds-view-in-the-kpi-fiori-apps-for-smart-business-services/feed/ 0 4856
“A Strategic View of SAP Fiori: Insights from a Space Level Perspective” https://technicalgyanguru.com/a-strategic-view-of-sap-fiori-insights-from-a-space-level-perspective/?utm_source=rss&utm_medium=rss&utm_campaign=a-strategic-view-of-sap-fiori-insights-from-a-space-level-perspective https://technicalgyanguru.com/a-strategic-view-of-sap-fiori-insights-from-a-space-level-perspective/#respond Tue, 01 Oct 2024 06:48:22 +0000 https://technicalgyanguru.com/?p=4693 Discover the high-level benefits of SAP Fiori with our in-depth guide. Explore its design principles, the SAP Fiori Apps Library, and how it integrates with existing systems to enhance business…

The post “A Strategic View of SAP Fiori: Insights from a Space Level Perspective” first appeared on TECHNICAL GYAN GURU.

]]>
Discover the high-level benefits of SAP Fiori with our in-depth guide. Explore its design principles, the SAP Fiori Apps Library, and how it integrates with existing systems to enhance business performance and user experience.

In today’s digital era, optimizing user experience is crucial for enhancing business processes and operational efficiency. SAP Fiori represents a significant advancement in this realm, offering a modern, role-based approach to user interfaces within SAP systems. This blog post provides a comprehensive overview of SAP Fiori from a strategic, space-level perspective, exploring its core functionalities, benefits, and integration possibilities. By understanding SAP Fiori at this high level, organizations can better appreciate how it transforms user interaction and boosts overall productivity.

What is SAP Fiori? Unpacking the Concept

At its core, SAP Fiori is a design framework that redefines the user experience for SAP applications. By integrating modern design principles with SAP’s powerful backend systems, SAP Fiori offers a streamlined, intuitive interface that significantly enhances usability. It focuses on delivering a consistent and responsive experience across various devices, whether on desktop, tablet, or mobile.

SAP Fiori is built on the principle of simplicity, aiming to simplify user interactions with complex SAP systems. It achieves this by providing role-based access, which ensures that users see only the information and functionalities relevant to their specific roles. This tailored approach not only improves efficiency but also reduces the learning curve associated with traditional SAP interfaces.

Exploring the SAP Fiori Apps Library: A Treasure Trove of Functionality

The SAP Fiori Apps Library is a central component of the SAP Fiori ecosystem, offering a comprehensive repository of pre-built applications designed to meet diverse business needs. This library categorizes applications into three main types: transactional apps, analytical apps, and fact sheets.

Transactional apps facilitate daily business tasks such as processing orders or managing inventory. They streamline these processes by offering a simplified and user-friendly interface. Analytical apps, on the other hand, provide insights and reports based on real-time data, enabling informed decision-making. Fact sheets offer detailed information on business objects, such as customers or products, giving users a comprehensive view of critical data.

By leveraging the SAP Fiori Apps Library, organizations can quickly identify and deploy applications that align with their business requirements. This library not only accelerates implementation but also ensures that users have access to the tools they need to perform their roles effectively.

Navigating the SAP Fiori Library: An Essential Guide

The SAP Fiori Library, accessible via the SAP Fiori Launchpad, serves as the gateway to exploring and managing SAP Fiori applications. This library provides a user-friendly interface that allows users to search for, explore, and launch various applications based on their roles and needs.

Users can browse through the SAP Fiori Library by categories or use the search functionality to find specific apps. Each application in the library is accompanied by detailed information, including its purpose, functionalities, and prerequisites. Administrators can also use the library to manage application deployment, configure settings, and monitor performance.

Effective navigation of the SAP Fiori Library is crucial for maximizing the benefits of SAP Fiori. By familiarizing themselves with the library’s features and functionalities, users and administrators can ensure a seamless experience and optimize their use of SAP Fiori applications.

The Role-Based Approach: Tailoring SAP Fiori to User Needs

A defining feature of SAP Fiori is its role-based approach, which tailors the user experience to specific roles within an organization. This approach ensures that users see only the information and functionalities relevant to their responsibilities, reducing complexity and improving efficiency.

For instance, a finance manager might have access to applications related to financial reporting and budget management, while a sales representative would see applications focused on sales orders and customer interactions. This targeted presentation of information helps users focus on their tasks without being overwhelmed by irrelevant data or features.

By adopting a role-based approach, SAP Fiori enhances productivity and streamlines workflows. Users can complete tasks more efficiently, and organizations can benefit from a more organized and user-centric interface.

SAP Fiori Login: Accessing Your Applications Securely

Accessing SAP Fiori applications involves a straightforward login process designed to ensure secure and personalized access. The SAP Fiori login page is the entry point to the SAP Fiori Launchpad, where users can access their assigned applications and services.

Users need to enter their credentials, including a username and password, to log in. Depending on the organization’s security protocols, additional authentication methods such as single sign-on (SSO) or two-factor authentication (2FA) may be required. Once logged in, users are directed to the SAP Fiori Launchpad, where they can access their role-specific applications and begin their tasks.

The SAP Fiori login process is designed to provide both security and convenience, ensuring that users can easily access their applications while maintaining the integrity of the system.

Design Principles of SAP Fiori: Enhancing User Experience

SAP Fiori’s design principles are foundational to its success in transforming user experiences. These principles include simplicity, coherence, and responsiveness, each contributing to a more effective and engaging interface.

Simplicity is about reducing complexity by presenting only the necessary information and actions. Coherence ensures a consistent look and feel across all applications, making it easier for users to navigate and use different apps. Responsiveness guarantees that applications work seamlessly across various devices and screen sizes.

By adhering to these design principles, SAP Fiori delivers a user experience that is both visually appealing and highly functional. This focus on user-centric design helps organizations achieve higher levels of user satisfaction and operational efficiency.

Integrating SAP Fiori with Existing Systems: Best Practices

Integrating SAP Fiori with existing SAP systems is a critical step in realizing its full potential. Effective integration ensures that SAP Fiori applications can interact seamlessly with other SAP modules and data sources, providing a unified user experience.

Organizations should work closely with their IT teams or SAP consultants to facilitate integration. This process may involve setting up interfaces, configuring data exchanges, and testing application performance. Successful integration allows organizations to leverage SAP Fiori’s capabilities fully, enhancing their overall SAP ecosystem.

Best practices for integration include thorough planning, comprehensive testing, and ongoing monitoring. By following these practices, organizations can ensure that their SAP Fiori implementation is smooth and effective.

Future Trends in SAP Fiori: What to Expect

As technology continues to evolve, so too does SAP Fiori. Future trends in SAP Fiori may include advancements in artificial intelligence (AI), machine learning, and advanced analytics. These innovations aim to further enhance user experience by providing intelligent recommendations, predictive insights, and automated workflows.

Additionally, SAP Fiori is likely to continue its focus on mobile and cloud-based solutions, enabling users to access applications and data from anywhere and on any device. Staying informed about these trends will help organizations remain competitive and fully leverage the capabilities of SAP Fiori.

Conclusion

SAP Fiori represents a significant leap forward in user experience design for SAP applications. By providing a modern, role-based, and responsive interface, SAP Fiori enhances productivity and user satisfaction. Understanding SAP Fiori from a high-level perspective helps organizations appreciate its transformative impact on business operations.

From exploring the SAP Fiori Apps Library to integrating with existing systems, SAP Fiori offers a range of features and benefits designed to optimize user interactions and streamline processes.


you may be interested in this blog here

Discover Joy Worksheet for Pre Primary English PDF Free Download

Getting the Best Salesforce Partner: A Tutorial for Business Growth

The post “A Strategic View of SAP Fiori: Insights from a Space Level Perspective” first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/a-strategic-view-of-sap-fiori-insights-from-a-space-level-perspective/feed/ 0 4693
An Overview of SAP Fiori ABAP Programming Model – 1 https://technicalgyanguru.com/an-overview-of-sap-fiori-abap-programming-model-1/?utm_source=rss&utm_medium=rss&utm_campaign=an-overview-of-sap-fiori-abap-programming-model-1 https://technicalgyanguru.com/an-overview-of-sap-fiori-abap-programming-model-1/#respond Tue, 01 Oct 2024 06:47:04 +0000 https://technicalgyanguru.com/?p=4875 Fiori is at the forefront with S/4HANA.Additionally, in order to create SAP Fiori Applications, ABAP engineers must transform into stunning butterflies in order to sip the delightful nectar of the…

The post An Overview of SAP Fiori ABAP Programming Model – 1 first appeared on TECHNICAL GYAN GURU.

]]>
SAP Fiori ABAP Programming Model - 1

Fiori is at the forefront with S/4HANA.Additionally, in order to create SAP Fiori Applications, ABAP engineers must transform into stunning butterflies in order to sip the delightful nectar of the Fiori blossoms.

Paradoxically, the comparison is ideal. For SAP ABAP Developers, there is a paradigm shift from the dull blue SAP screen to the stunning Fiori Applications. Core Data Services (CDS) is the cornerstone of S/4HANA, and one of its pillars is the ABAP Programming Model for SAP Fiori. The three SAP programming languages of the future are expected to be CDS, BOPF, and OData. Thus, it is imperative that we begin studying these subjects.

It is something you cannot escape, even if you attempt to put it off as long as you can. We are aware that change can be challenging, but we will do our best to make the switch from the outdated ABAP Develper to the newest ABAP Programmer for Fiori as easy and enjoyable as possible. We have attempted to develop a crash course tutorial series in this brief series, which is a summary of several books released by SAP Press and SCN blog entries, so you can understand it quickly. In order to assist you in comprehending, learning, and using these new areas as soon as possible, we have kept all of the articles brief, sharp, and to the point.

The book that was released states that the “ABAP Programming model for Fiori supports the development of OData services optimized for SAP HANA for SAP Fiori applications. It covers analytical, transactional, and search application scenarios and is based on Core Data Services (CDS) Views.” The two main applications of the ABAP Programming Model for SAP Fiori are Read-Only Applications and Transactional Applications.

For read-only applications, all that is required is an underlying CDS data model and application-specific analytics or search annotations. The CDS data model and related annotations are then made available as an OData service via the Service Adaptation Description Language (SADL).

The creation of a Business Object Processing Framework (BOPF) Business Object is necessary for Transactional Applications in addition to Read-Only Applications. This is because BOPF Actions, Validations, and Determinations handle additional business logic in addition to handling Create, Update, and Delete operations.

Okay, so Technicalgyanguru wouldn’t be necessary if we typed every word that was in the book.This brings us to our explanations. Real-world tasks require two different kinds of apps.First, we simply retrieve information from the

Selecting the SAP Fiori App

The journey begins with selecting the right SAP Fiori app for your needs. The SAP Fiori apps reference library is an extensive repository that provides detailed information about available Fiori apps, including functionality, prerequisites, and compatibility. To start:

  1. Access the SAP Fiori Apps Reference Library: Navigate to the SAP Fiori apps reference library on the SAP Support Portal or SAP Fiori launchpad.
  2. Search and Filter: Use search and filter options to locate the specific app you need. This could be based on functionality, industry, or system requirements.
  3. Review App Details: Examine the app’s description, prerequisites, and any related documentation to ensure it meets your requirements.

Planning Installation with Maintenance Planner

Once you’ve selected the app, the next step is to plan the installation using the Maintenance Planner. This tool is instrumental in preparing for system updates and new installations.

Steps for Planning Installation:

  1. Log into Maintenance Planner: Access the Maintenance Planner through the SAP Support Portal. Ensure you have the necessary authorizations to perform planning tasks.
  2. Create a New Maintenance Plan: Start by creating a new maintenance plan for your installation or update project.
  3. Add System Information: Input details about your existing systems and the new components or updates you plan to install. Maintenance Planner will use this information to generate a comprehensive plan.
  4. Analyze System Compatibility: Maintenance Planner checks for compatibility between your current system landscape and the new changes, ensuring that all components will work together seamlessly.
  5. Generate Stack XML: Use Maintenance Planner to generate a consolidated stack XML file that outlines all planned changes. This file will guide the installation process and ensure all components are correctly applied.

Installing and Updating the System

With your plan in place, you can proceed to install or update the system. The installation process generally involves:

  1. Download Required Files: Maintenance Planner allows you to push all necessary files for the installation into a download basket in a single step, streamlining the file acquisition process.
  2. Install Components: Use the Software Update Manager (SUM) to apply the stack XML and install the new components or updates. Follow the guided steps provided by SUM to ensure a smooth installation.
  3. Post-Installation Checks: After installation, perform necessary post-installation steps, such as applying any required configuration changes or running validation checks.

Advantages of Using Maintenance Planner

1. Consolidated Planning: Maintenance Planner enables consolidated planning by generating a stack XML that includes all planned landscape changes. This holistic view simplifies managing updates and ensures that all components are correctly synchronized.

2. Support for New System Installations: The tool supports the installation of new systems, making it easier to integrate new components into your existing landscape. It helps in ensuring that new installations are seamlessly incorporated.

3. Streamlined File Management: Maintenance Planner simplifies file management by allowing you to push all required files for the installation into a single download basket. This reduces the complexity of file handling and minimizes the risk of missing critical files.

Conclusion

The integration of SAP Fiori apps into your system landscape can significantly enhance user experience and operational efficiency. By leveraging the SAP Fiori apps reference library and the Maintenance Planner, you streamline the process of selecting, planning, and installing these apps. Maintenance Planner’s consolidated planning, support for new installations, and efficient file management capabilities offer substantial benefits, making system updates and installations more manageable and effective.

you may be interested in this blog here:-

The Journey of Alex: From Confusion to Clarity in SAP Software Meaning

Salesforce List: Your Essential Guide to Features and Functionalities

The post An Overview of SAP Fiori ABAP Programming Model – 1 first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/an-overview-of-sap-fiori-abap-programming-model-1/feed/ 0 4875
SAP Fiori ABAP Programming Model – 2 – CDS – Overview https://technicalgyanguru.com/sap-fiori-abap-programming-model-2-cds-overview/?utm_source=rss&utm_medium=rss&utm_campaign=sap-fiori-abap-programming-model-2-cds-overview https://technicalgyanguru.com/sap-fiori-abap-programming-model-2-cds-overview/#respond Mon, 30 Sep 2024 06:48:00 +0000 https://technicalgyanguru.com/?p=4881 One of the foundational elements of all SAP Fiori , ABAP Programming Model – 2 – CDS – Overview ,SAP S/4HANA application types is Core Data Services (CDS). They facilitate…

The post SAP Fiori ABAP Programming Model – 2 – CDS – Overview first appeared on TECHNICAL GYAN GURU.

]]>
One of the foundational elements of all SAP Fiori , ABAP Programming Model – 2 – CDS – Overview ,SAP S/4HANA application types is Core Data Services (CDS). They facilitate the creation of semantically rich data models that support code push-down to the SAP HANA database and are implemented on top of new S/4HANA or ECC tables. In addition to offering three training batches on ABAP CDS, we have a comprehensive tutorial series on CDS.

Beginners of ABAP CDS who wish to continue with the ABAP Programming Model in SAP Fiori without having to navigate and bounce between pages would find this tutorial to be helpful. However, if you want to go deeper into it, we strongly advise you to take our Core Data Services training series.

What transpires when CDS View is created?

When a CDS view is activated, two artifacts are produced: a CDS View Entity, which is a SAP HANA view on the database, and a corresponding SQL View, which is the Data Dictionary (DDIC) view in the ABAP Dictionary (@AbapCatalog.sqlViewName). With the object repository entry R3TR DDLS, just the CDS View definition is sent. Different sorts of annotations can be used to augment CDS views, which are built using CDS’s Data Definition Language (DDL), to cover various application scenarios.

Navigate to transaction SE11; the above-highlighted view will appear in the ABAP DDIC view options.

CDS Views’ naming convention

The following naming conventions are used to categorize CDS Views:

Private View (P_)

View Interface (I_)

Using Perspective (C_)

Exclusive Perspective

Private Views are made for internal use and will be accessible everywhere. Developers can build associations with this Private view or utilize it to develop CDS views.SAP does, however, advise users not to use Private views as they are not safer.In the future, certain columns might be added or removed in a way that would hinder our development because it depends on these viewpoints.

Please keep in mind that this does not mean we should never embrace their opinions. Steer clear of consumption if possible.

View of the Basic Interface

View of the Composite Interface

From a technical standpoint, Basic and Composite views differ in:

Master data is contained in Basic View, whereas both Master and Transactional data are contained in Composite View.Using I_ conventions, the Basic and Composite Interface views are identified.

View of Consumption

Interface views serve as the foundation for this view. This view serves as the data model’s pre-made solution. It is also much simpler to design and use a Fiori App using these views. It can also be used analytically; BI reports, for example, can be created. It is easy to develop if SAP already provides the Consumption views.

Key Features of CDS:

  1. Semantic Layer: CDS views offer a business-oriented abstraction layer over raw data, making it easier for developers and end-users to interact with complex data structures.
  2. Performance Optimization: Leveraging SAP HANA’s in-memory processing, CDS views are designed to optimize performance, enabling fast and efficient data retrieval and manipulation.
  3. Reusability: CDS views can be reused across different applications, reducing redundancy and ensuring consistency in data representation.

Practical Application of CDS Views

Implementing CDS views involves several steps, each crucial for ensuring that data is modeled and utilized effectively:

1. Defining CDS Views: The first step is to define the CDS views using the ABAP Development Tools (ADT) in SAP HANA Studio or Eclipse. This involves creating a CDS view definition that specifies the data source, fields, and any necessary calculations or aggregations.

sqlCopy code@AbapCatalog.sqlViewName: 'ZMY_CDS_VIEW'
@EndUserText.label: 'My CDS View Example'
define view Z_MY_CDS_VIEW as select from some_table {
    key field1,
    field2,
    sum(field3) as total_field3
}
group by field1, field2

2. Exposing CDS Views as OData Services: To integrate CDS views with SAP Fiori apps, they need to be exposed as OData services. This is done using the SAP Gateway, which allows Fiori apps to consume the data via standard web protocols.

3. Integrating with Fiori Apps: Once the OData service is set up, it can be consumed by Fiori apps. Developers configure Fiori tiles and applications to use the OData services, ensuring that the data presented aligns with the business requirements.

4. Testing and Validation: Thorough testing is essential to ensure that the CDS views deliver accurate data and perform well under different scenarios. This includes validating data accuracy, performance, and the user experience in Fiori apps.

Conclusion

Core Data Services (CDS) views are a fundamental component of the SAP Fiori ABAP Programming Model, offering a powerful framework for data modeling and integration. By providing a semantic layer over raw data, CDS views enable developers to create efficient, real-time, and user-centric applications. Their ability to simplify data modeling, optimize performance, and enhance user experience makes them indispensable for modern SAP Fiori development.

Implementing CDS views effectively requires careful planning and execution, from defining the views to integrating them with Fiori apps. Embracing CDS views not only streamlines data management but also ensures that SAP Fiori applications deliver meaningful and actionable insights to users. As organizations continue to evolve and leverage advanced technologies, understanding and utilizing CDS views will remain a key factor in achieving success and driving innovation in the SAP ecosystem.

you may be interested in this Blog Here

Can I become full stack developer in 3 months?

Salesforce Incident Management: Streamlining Issue Resolution

How the Digital Services Act is Shaping the Future of the SAP Community

The post SAP Fiori ABAP Programming Model – 2 – CDS – Overview first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/sap-fiori-abap-programming-model-2-cds-overview/feed/ 0 4881
130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & jQuery, Interview Questions & Answers https://technicalgyanguru.com/130-sapui5-sap-fiori-html-css-javascript-jquery-interview-questions-answers/?utm_source=rss&utm_medium=rss&utm_campaign=130-sapui5-sap-fiori-html-css-javascript-jquery-interview-questions-answers https://technicalgyanguru.com/130-sapui5-sap-fiori-html-css-javascript-jquery-interview-questions-answers/#respond Sat, 28 Sep 2024 06:39:00 +0000 https://technicalgyanguru.com/?p=4860 Many requests for the next round of interview questions and answers came in after I posted my interview questions on SAP Fiori, SAP HANA ABAP. As I stated in my…

The post 130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & jQuery, Interview Questions & Answers first appeared on TECHNICAL GYAN GURU.

]]>
Many requests for the next round of interview questions and answers came in after I posted my interview questions on SAP Fiori, SAP HANA ABAP. As I stated in my last post, we cannot assess someone’s level of expertise based solely on how they respond to specific queries. Although some highly skilled technical architects are capable of designing and completing intricate projects, they might not perform flawlessly in an interview.
Reason is easy to understand.There are situations when interviewers are rejecting candidates (in which case, not even God can save you), and other situations where the candidate is unable to articulate the correct response in a logical and sequential manner (despite knowing the answer). In my career, I have conducted very few interviews and

I have created a series of questions and answers from my study notes in the hopes that these may assist the deserving candidate who wants to ace the interview for his next project/job. Although you still need to thoroughly comprehend each topic to have a firm grasp of the principles, this quick Q&A may help you review and assess your knowledge.

Q1. SAP Fiori LaunchPad Benefits

Adaptability

Device Assistance

Independent of Platform

Support for Browsers

coherent in character

Combination

Open norm

Record-keeping

First, decide which view (the default view) to load into the app control.

Step 2: Add the view’s object (page) to the app to make the view aware of it.

We return the main view’s object in the createContent method. that is, the page

  1. How Do I Make a Control in the User Interface?

The process involves creating an event for a control (such as a button), defining it in the controller, and then adding the control to the page.

Q4. Using the API to switch to a different view?

Answer app.to

Q5. How can I obtain the object’s runtime instance in order to access the control’s object?

The answer is sap.ui.getCore.byId (“”).

  1. Explain the SAP UI5 Framework.

A framework for creating responsive web applications is SAP UI5. Performance has nothing to do with responsiveness; responsiveness is the capacity of a program to adjust to any type of device. It provides a consistent user experience on all platforms (various browsers and devices).

A framework is made up of libraries; libraries contain classes, and classes contain methods.

Q7. UI technology evolution

Q8. Explain the SAP UI5’s design-time and run-time components.

Yes, in fact. Typically, a framework is made up of two kinds of libraries, each of which has two components: Design-time The SAP UI5 component includes all of the classes, frameworks, and functionalities needed to build any kind of application from the ground up.

The Fiori application is executed by the SAP UI5 run-time component, which also includes a renderer that converts the application code into a format that is readable by browsers (such as HTML5, CSS, and JS).

Q9. What are the steps involved in creating an application in any programming language?

Bootstrap in UI5 –

1 Initialization – Load required dependencies \script id=”sap-ui-bootstrap” src = “sap-ui-core.js” = “sap.m”; data-sap-ui-libs;With theme “sap_bluecrystal,” data-sap-ui
In the tag of the HTML document, specify class=”sapUiBody” to make the theme active on the page.

  1. Declaration – Program Data Variables – Create User Interface Control new libraryName = var var_name.ClassName(sId, sProperties); sId: your UI control's unique ID sProperties: To configure control attributes, use control properties. inside braces with curls.

( ) – curly braces [] – parenthesis { } – bracket

  1. The real program logic, also known as orchestration logic, which includes manipulation, IF, loops, calls, and user display control

PlaceAt(“id of control”) for ObjectContro ;

  1. Output: Present the user’s output.
  2. Tidying Up

Q10. How can the Bootstrap for UI5 framework be loaded so that it can function offline?

Observe the index.html file’s syntax:

The rationale is that all UI5 Framework Libraries are pre-installed on Orion Server, which powers the WebIDE local installation. We define neo-app.json, which serves as an interface between Orion Server ->> Resources (test) to load the framework and use the libraries within.

Q11. How to load the Bootstrap for UI5 framework to work in the Offline Mode?

Reason being: Since the WebIDE local installation runs on Orion Server, which has all UI5 Framework Libraries pre-existing in the Server. To access the libraries in the framework, we define neo-app.json which acts as an interface between Orion Server ->> Resources ( test ) to load the framework.

Q11. Define structure of a Web Application / HTML page?

Every web application that a browser can comprehend is always an HTML page, also known as a static webpage. An HTML page is the typical web application page’s structure.

<html>
                <head>
                                ( * creation of control )
                </head>
                <body>
                                ( * place the control in the body )
                </body>
<html>

  1. What is the SAP WEB IDE?

Yes. Developers can construct and extend Fiori Apps using the SAP WebIDE Integrated Development Environment (IDE).

  • Developing Fiori Apps is made simpler by employing pre-made templates.
  • To expand Fiori Applications, use the Extensibility Pane.
  • Numerous choices for deployment.
  • permits group repository sharing. Git repository
  • can use any device to access it from anywhere. No local footprint; installation must be done locally.

Q13. What is HTML?

HTML stands for Hypertext Markup Language which is created by W3C = World Wide Web Consortium who is responsible for defining HTML tags and versions. All browser vendors like Chrome, IE, Firefox, Safari.

It is used to create static web pages.

HTML is not a programming language. It is based on tags, if we follow the approach, we can create a static webpage using these standard tags. E.g. button, input, datalist, li, ul, h1, table … etc.

Important Points to be noted:

  • HTML is not case-sensitive
  • Browser directly understand HTML
  • User can only see content in browser provided it is kept in body of HTML
  • Every HTML element can have ID property. Developer should make sure that ID is always unique.
  • Html elements can also have name, class (classification) property, which doesn’t needs to be unique.
  • Difference between HTML and HTML5?
    • HTML5 is just the advancement of HTML, it was released in year 2014.
    • HTML5 is labral in nature
      • Even we put something in head of html, it will be visible to user. Ideally we should not do that.4
    • Declaration of DOCTYPE

Older version example <!DOCTYPE html DND_VERSION=“XHTML/4.02” HTMLSCHEMA=“htmlns”>

<!DOCTYPE html> à tells the file that it’s an html page

  • For some of the tags in HTML5, we don’t need to put ending tag e.g. img, input
    • New elements introduced to define proper structure of the website like header, footer, article, section etc.
    • Direct support for Audio and Video tags in HTML5, before that plug-in support was needed in browsers

Q14. Difference between HTML5 and SAP UI5?

Q15. Difference between Open UI5 and SAP UI5?

  • The most widely used libraries for user consumption are included in Open UI5, which is a subset of SAP UI5.
  • While SAP UI5 is a licensed product that is included with SAP Netweaver or SCP (SAP Cloud Platform, formerly known as HCP – HANA Cloud Platform), Open UI5 is available as open source under the Apache 2.0 license.

Q16: In HTML, what is a metatag?

It shows the HTML page’s metadata. (For additional information about attributes, visit www.w3cshools.com.)
Features of a metatag include:
Encoding type: aids the user in determining the appropriate character type
Author: Keyword generated content that appears in a metatag for search engine optimization
Description: An overview of the websites found in search engine

Q17. What do HTML List tags mean?

Data sequences are displayed using list tags.

Two categories of list tags exist:

List not in order: <ul></ul>
List in order: <o></o>

Q18: What elements are at the block level?

The HTML content is correctly structured through the usage of block level components. These components don’t take up any space on the page. Two kinds of elements at the block level:

div stands for division tag.

It begins automatically with a new line.
used to assemble or form a block of components.
span is an inline element.

It doesn’t begin with a new line.
It encloses a preexisting HTML component.

Question19: What is the Document Object Model, or DOM?

The process by which a browser transforms HTML into a tree data structure is called Document Object Model, or DOM. HTML’s runtime structure in a browser.

20 What does HTML table structure mean? Q20.

Q21: What is the <iframe> tag?

<iframe> tag in HTML is used to embed another HTML document.

<iframe href=“(reference of the HTML document)” width=“” height=“”></iframe>

Q22: What is CSS?

Cascading Style Sheet is what CSS stands for. The styling of an HTML element is accomplished by using CSS, which keeps style code and HTML code apart. Three approaches to using CS
1. Inline style is similar to styling at the element level. Overuse of code

Syntax:

                <style>
                                selector : {
                                                prop: value;
                                                prop: value
                                }
                </style>

3. External Style

23: What’s Inline Styling?

All of the elements defined in the tag are styled at the element level or tag level using inline styling. Therefore, it is not possible to apply style to every element if there are several. Then, we employ Internal Style.

Q25 Can you explain responsive web design?

Web design that automatically adjusts to the size of the screen to offer a constant user experience. Without a scroll bar at the page level, the screen adapts itself based on available space on the device.

26 What is the CSS box model, Q26?

The way an element appears on an HTML page with a border and the actual element is called the CSS box model. Padding (property) is the space between the element and the border; margin (pro) is the space between two distinct element boxes.


Q27: In CSS, what is a pseudo class?

Pseudo classes are essentially unique IDs that allow CSS to be applied to items in response to specific user actions or events on the user interface.

choice: pseudo-class� �—CODE

** w3cshools.com has a list of available pseudo classes, such as FOCUS, HOVER, etc.

Question 28: What exactly is JavaScript?

It’s a programming language that the browser can understand. It differs greatly from Java in terms of philosophy, design, and goal.

Case matters in JavaScript
The naming convention that must be used when declaring “functions” and “variables” in JavaScript
The first word should begin with a small letter, followed by a camel cap or the initial letter of the following word in capital letters, for example, Hello World -> helloWorld.

Each and every JS statement should conclude with a semicolon (;)
centered around objects.

Q29: What kinds of JavaScript (JS) are there?

Two varieties of JS exist:

clientele JS: JavaScript code that executes entirely client-side, within a browser. to create online apps that are responsive, such as Angular JS and UIC5.
server-side JS: Server-side JS code is executed. such as Node.JS and XSJS. Server-side programming includes functions like emailing, DB searches, data manipulation, and system status updates.

Q30: What is JavaScript’s (JS) purpose?

Yes. The following uses exist for Java Script:

Verify the information.
Carry out the client’s calculations: Write if, looping, arithmetic, and logical operations in imperative logic.
Examine the circumstances and functioning of the
Speak with the call server
Change the DOM (html)
Runtime CSS changes

Q31. Steps/Techniques to apply JavaScript in the code?

3 ways we can apply JS in the code:

  1. Inline JS – code is written at element level
  2. Internal JS – code is written at page level inside <script></script> tag.
  3. External JS – reference an external file (.js) into your html page,                                           

<script src=“(path of JS file)”></script>

Q32: What are the various JavaScript output functions?

alert(): Show the user Console a popup.log: Print the results to the console document.Write content to take the place of the entire HTML page.innerText: Modify an HTML element Q33’s text. Which pre-defined objects are available in JavaScript?

Two categories of entities:

The term “document” refers to the object of your Document Object Model (DOM), which is the runtime structure of an HTML page. The document object offers numerous methods to access the object of an HTML element or elements, which are represented by reusable methods or classes called APIs, or Application Programming Interfaces.

The single element can be found using document.getElementById (the id of an HTML element is unique).
This is the browser window’s object: document.getElementsByClassName returns a list of all elements by class name; document.getElementsByTagname returns a list of all elements with that tag.

Q34: What is the syntax in JavaScript for creating variables?

Question 35: What is Java Script Object Notation, or JSON?

If an array has to define more than one record, more objects must be added to the array. Java Script Object Notation, or JSON, is the idea behind fusing arrays and objects together.

var myItab = [{“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}, {“prop”: val, “prop”: val}]



Q36: What kinds of JavaScript functions are there?

Two categories of JS functions

1. Anonymous functions (nameless functions)

function(argument, argument) { ^                               

2. Named functions (functions that you have defined yourself)

function functionName(argument, argument){ �                                                                                                  �

Crucial: An argument can be supplied to a function.

var = function(){ ….

Q38: Describe jQuery.

A language is not jQuery. It is a short and efficient JavaScript package that helps you avoid writing lengthy JS code. The idea behind it is “write less, do more.”

The most often used lines of code and methods can be included into application code using jQuery, enabling developers to rapidly accomplish their goals with little to no coding.

This library can be used in two ways:

Get the jQuery plugin, add it to your project, and use it locally.
Internet source cited as CDN (Content Delivery Network)
jQuery Library loading is required. ->

The syntax for using a jQuery library, which is an external JS file, is as follows:

Q39. How to Use jQuery Syntax

the action() of $(selector);

$ – instruct the browser that we’ll be using jQuery
Selector: #id, #className, tagname
Action: method, name of the event, on, css(‘prop’,’val’)
$(selector).action(callBackFunction(), parameters);

What is the Document Object Model, or DOM?

The process by which a browser transforms HTML into a tree data structure is called Document Object Model, or DOM. HTML’s runtime structure in a browser.

To access the internet developer toolbar and developer tool, press F12.

What’s Inline Styling?

All of the elements defined in the tag are styled at the element level or tag level using inline styling. Therefore, it is not possible to apply style to every element if there are several. Then, we employ Internal Style.

Could you explain internal styling?

A selector can be used to apply internal styling to a set of items at once.

One of the two ways to utilize a selector is as a unique identification of an element or elements.

#id: using a specific element’s style

.className: This class name categorizes items or groups of elements; to use it, insert the element inside a

tag.

For instance,

“your element”

tagName: each element that hast level. But wrap the element around a tag with a div tag and use class name.

Can you explain responsive web design?

Web design that automatically adjusts to the size of the screen to offer a constant user experience. Without a scroll bar at the page level, the screen adapts itself based on available space on the device.

What is the CSS box model, Q26?

The way an element appears on an HTML page with a border and the actual element is called the CSS box model. Padding (property) is the space between an element and its border; margin (property) is the space between two distinct element boxes.

In CSS, what is a pseudo class?

Pseudo classes are essentially unique IDs that allow CSS to be applied to items in response to specific user actions or events on the user interface.

choice: pseudo-class{ —CODE** list of accessible pseudo

Q30. What is the purpose of JavaScript(JS)?

Ans. JAVA Script is used for following purposes:

  1. Validate the input
  2. Perform calculations on client side: Write imperative logic – if, looping, arithmetic and logical operations
  3. Check conditions and operations
  4. Call server
  5. Manipulate DOM (html)
  6. Change CSS at runtime

(“id of control”);

2. Using View object when we use MVC architecture (XML Views)

                this.getView().byId(“id of control”);
                this keyword represents the object of current control.

In UI5, how can I construct a control?

How to write a control in syntax:

oControlName in var o = new .sId, sProperties as ControlName;

Keep in mind that the control name is usually capitalized at the beginning. A case of pure camels.

sId: The control’s distinct ID.

sProperties: the UI element’s characteristics or attributes. Every property needs to adhere to the syntax below.

{ propname: “prop val”, propname: “prop val” }

How does a SAP UI5 control define its control hierarchy?

Things to keep in mind when using the SAP UI5 hierarchy

The “extends” keyword in JavaScript is used to denote inheritance.

If a specific class’s property or event is not visible, try looking through its parent class.

How Can I Get Change/Display Functionality and Embed a Fragment Straight into the View?

Define Fragments

Create Fragment XML


What are different methods in a Controller?

The Methods Forming part of a Controller are known as HOOK Methods

onInit() – this method gets called when the object of the controller is instantiated
onExit()-
onAfterRendering()
onBeforeRendering()

What is the purpose of index.html?

index.html is used to: 1. Create object of the view & 2. Add it to the DOM

Procedures for the SAP UI5 framework’s implementation and execution

First, use getControllerName to obtain the controller name.
Step 2: Constructs the Controller’s object
Step 3: Send the Controller’s object to the content (createContent)

Q55: How can I tell the app where your view and controller are located in the root folder?

It is defined by adding the path to the data-sap-ui-resourceroots within the initialization section of the index.html header’s

data-sap-ui-resourceroots=‘{ “rootnamespace” : “./” }’

Naming view & controller

Q57: How can I verify a JSON?

jsonlint.com

In JavaScript, how can I declare distinct views?

core.mvc.sap.ui.ViewType.JS
ViewType.XML sap.ui.core.mvc
JSON-based sap.ui.core.mvc.ViewType
HTML, sap.ui.core.mvc.ViewType

How can I construct a path that connects view elements to JSON data?

For instance, the JSON data below:

{                 “empStr”: {                                 “empNo”: 100,                                 “empName”: “SAPYard”,                                 “salary”: 900,                                 “curr”: “EUR”                 },                 “empTab”: [{“empNo”: 200}, {“empNo”: 300}, {“empNo”: 400}] }

Ede in the future!

In SAP UI5, what does a TABSTRIP control mean?

ICON TAB BAR is used in UI5 to construct a TABSTRIP UI.

The following is how an ICONTAB FILTER is often implemented:

In SAP UI5, what does a TABSTRIP control mean?

In UI5, a TABSTRIP UI is implemented using ICON TAB BAR

A typical ICONTAB FILTER can be implemented as follows:

Use SAP UI5 to implement TABLE CONTROL

A table is a multi-column list control. It is a part of the sap.m library, and you can see that it “extends” the sap.m.ListBase Class in the SDK when you check sap.m.Table. And it has aggregation as “columns” to enable multi-column user interface.

Q102: Which Control endows a Text Control with properties like colors and icons?

Additionally, develop a formatter function in order to attain the “intuitiveness” in the table column:

CREATE

Similarly,

What does SAPUI5’s Fragments mean?

Reusable UI components called fragments are used to modularize user interfaces in UI5 applications. We are dividing up the UI into fragments utilizing the fragments, much like we do with custom controllers in UI5. These parts can be combined or utilized again by different controllers or views. Therefore, the matching controller of the view in which the fragment is declared defines the logic for Fragment Control components. (To hear an explanation with more examples, watch the video.)

How Can a View’s Fragment Be Declared?

Step 1: To call the pop-up fragment, provide an input field for the F4 help. applying the “valueHelpRequest” method

Thus, while integrating sap.m.Dialog into your fragment, make sure to verify the SDK: the

How can a “Page” add a footer?

create

Additionally, when the “Approve” button is clicked, a pop-up message is displayed via the message-box API.

REMEMBER!! Always realize to specify a global variable for the object in order to preserve I/O on the pop-up fragment. This will ensure that the pop-up’s properties are maintained even if user action is taken on it.

.. What is the meaning of a custom control and what does it accomplish?

*** UI Controls / Elements are reusable UI5 components that can be used to customize the UI in many ways.

To accomplish a feature that isn’t included in Standard, you can create your own reusable control by designing it in a different file that serves as a library.

sap.ui.core.Control is the Super Class for all of the controls.

It is employed to create or specify a custom control

In JS, a keyword that denotes inheritance is extends

you may be interested in this blog here:-

Just a key and two clicks for ALV consistency check

Making Your First Salesforce Appexchange: A Complete Strategy

The post 130 SAPUI5, SAP Fiori, HTML, CSS, JavaScript & jQuery, Interview Questions & Answers first appeared on TECHNICAL GYAN GURU.

]]>
https://technicalgyanguru.com/130-sapui5-sap-fiori-html-css-javascript-jquery-interview-questions-answers/feed/ 0 4860