Webdynpro Chips,Side Panel, Page Builder

Major New Features are being added to Webdynpro ABAP since Netweaver 7.0 and Ehp 2 to improve the functionality of Webdynpro ABAP and it also provides ability for users to integrate SAP with non-sap world.

One of the key feature is the introduction of CHIP, Side Panel and Page builder features which help user to integrate multiple applications within one Webdynpro and also to integrate non-sap based applications within your ABAP application like Google Maps, Bing Search etc.

SAP also posted a blog on SCN to explain all the new features which is,

http://scn.sap.com/docs/DOC-8303

Main purpose of this blog is to provide basics about CHIPS,Side Panel and Page Builder based on which an ABAP analyst can easily develop a simple application in Webdynpro Abap.

CHIPs :

A CHIP (Collaborative Human Interface Part) is a small, widget-type, encapsulated, stateful piece of software that can be combined in a layout with other CHIPs to form a page or side panel.

It is like a reusable web-dynpro component which can be included in other applications.

For EX: If there is a requirement to develop an application which shows basic material information, then you can do that as a CHIP and can be re-used in any application where there is requirement to show material information.

Side Panel:

Side Panel concept is similar to NWBC Side Panel concept, where we can have a panel and show a webpage or another webdynpro application or integrate with any portal application and can also pass information from main application to side panel.

Page Builder: 

Page Builder is like a canvas where we can put multiple chips and link one chip to another and create a Page.

I will try to explain in brief as how to create each object explained above. Lets start with CHIPs:

Creating CHIPs:

Step 1: Create a Webdynpro Application to show  Flights Carrier Information.

Step 2: Now, this is a CHIP which shows carrier information from SCARR table so we need a method which will get data from SCARR based on CARRID which is an interface field for this CHIP(Like a Plugin). Create an Interface method which will get information from SCARR table.

IS_CARRIER is the importing parameter for this method.

Step 3 : Create Webdynpro CHIP for this application. Chip creation option is available in the Context menu of the Webdynpro component(from where we create webdynpro application).

On the pop-up, give the basic information necessary to save CHIP.

Step 4: Now, we have to create plugin for this CHIP which acts like a link to interact with other webdynpro applications/chips.

If you double click on the CHIP Name on the left side, on the side you will see Inports and Outports Tabs, for this case we need to create a Inport. When Click on Create

First we have to create a Port(Method which we created as the interface method) and then assign a parameter to this Port. Since we have used CARRID in the select query of ours, we are assigning that tas the Parameter for this Port.

SAP is using the concept of Tags which are created for Parameters and these tags are used as wire between two chips. If we have another chip, irrespective of its Importing parameter name, we can just create a Tag with similar name of this and use that as a wire.
This completes the CHIP creation part.

Side Panel Creation: 

Next Step is to create a webdynpro Application with a Side Panel and integrating Chip on that.

If you need Side Panel option for your application, main thing is to have a PageHeader element with a Invisible Container to show side panel in that,

Here I am displaying SFLIGHT data in a table. Main thing to consider is, page header must have name as PAGE_HEADER and Invisible container as TC_SIDEPANEL.

Also, in the DOININT you have initiate an action for opening Side Panel. Below is the code snippet for that,

    cl_wd_side_panel_api=>get_api( )->init( view_controller = wd_this->wd_get_api( )
                                          open_action_name = 'OPEN_SIDE_PANEL' ).

In the above code, its triggering action OPEN_SIDE_PANEL. So, you need to define that action in the MAIN view and for that action, it will allow us to write logic for that event. In this case, write below code,

         cl_wd_side_panel_api=>get_api( )->open( ). - This helps us to open the Side Panel API.

Also, in the same DOINIT, you can write logic to get data from SFLIGHT and update table.

Test the application to make sure it is showing expected results.

Now,open the same application in config mode by adding sap-config-mode=X. As soon as you do that, you will see the Side Panel Manager where you can do the config. for Side Panel.

Here give the configuration name for your side panel and click on Create button,

Once you click that, it opens the Side Panel Configuration screen.

Here you can either click on CHIP catalog button or Add CHIP button to add the chip you have created in Step 1.

If you have used CHIP catalog, just drag and drop your CHIP on the left panel.

I am also adding a WEB Chip on to my Side panel in this case, where I will be opening BING.COM. Just like we added above chip, from the same pop-up select Web-Chip.

Now, you should see your CHIP created in step 1 and a web chip on your Panel Configuration screen.

This step completes the design of the Side Panel. Now, we need to define navigation from main webdynpro application to the chip. If you remember, we created Tag for our CHIP, now we need to create link from main to chip WD using this wire.

For this now on the left side right click on the AIRLINE(CARRID) column,

On the next pop-up, give the Tag carrid and click on ADD, this should add the tag.This will now automatically wire the navigation from main webdynpro to CHIP.

This marks the last step of Side panel creation, now you should have your side panel ready for testing. Below is the screen shot of how it will look like,

Page Builder:

Now we come to the last part of using Page Builder. Page builder is creating configurations to SAP's webdynpro component, WDR_CHIP_PAGE.

Steps: In brief, steps to follow to create a Page are:

1. Create Application Component for WDR_CHIP_PAGE
2. Assign a Configuration Component for this newly created Application component.
3. Create Configuration Component.
4. Open Page Builder from the application component and design your page.

First, Create Application Configuration.

Here we are creating configuration for that WD Application.Once you click on that, it will open a Web application where you should give the name of new configuration and click on NEW button.

It will ask you for Package and Transport information.

Now, assign Configuration component for that application component,

Below screenshot shows the method to assign AC,

Here specify a Configuration name, it will give a warning that Config. doesnt exist but later you can navigate from this screen to create the configuration by clicking on the assigned configuration name.

You can define certain attributes for your configurations in the above screens too.

Now, on SE80 double click on your application component and Click on Test in Administrator Mode button.

You should see the canvas to configure your page,

Click on the CHIP Catalog button on the top to see the list of Chips,

On the Right Side you should see your chip, now drag and drop that on to this page,

Similarly add BING Iframe to this page.

Once you add both the Chips, your screen should look like below screenshot,

Coming to the Step of Wiring or Mapping these Chips.

In our Side Panel demo, we have seen that if you select Airline code on the left side, it will shows its details on the right side. Now, to do the same, we are adding a Outport Chip(Like a field which can be wired to other chips) and mapping that to BING Chip and also our developed CHIP.

Click on the CHIP Catalog once again and drag and drop OUTPORT Chip on to the page.

Step 1 is to Link our Carrier CHIP to the Outport CHIP,

On our CARRIER Chip, click on the button Display Connections,

If you remember, we created an Inport for our Chip, now we are maping our Inport to the Outport Chip we just created on our application.

Once you do the mapping, you should be able to enter Airline code on our Outport and click on Fire Outport button which will be Inport for our Carrier Chip and will show Airline information.

Now the task is to pass this Airline Carrier Name to Bing Search iFrame so that it will do a search by that carrier name.

First Create a Tag for this Carrier Name by right clicking on that field name and name it as QUERY. Bing iFrame already has Tag by named QUERY which you can map from this.

On the Bing Iframe click on Display connections and map this Tag to the Inport of Bing.

Once you do this, your Page is ready and it would like as pretty as shown below :).

This completes explanation process of creating Chips, Side Panels and Pages.

Maintaining Translations in SAP

Translations Maintenance is one of the important task after development. Most of the companies which implement SAP might have their operations in various countries, which brings the necessity of maintaining translations for the developed objects, reports or any kind of scenarios of SAP.

In this blog, I will try to explain the process of maintaining translations for various development objects in SAP, starting with our favorite Webdynpro Applications :).

Translations for Webdynpro Applications:

WD translations are slightly different to normal report translations. WD's use OTR concept for maintaining and storing free texts, which are not derived from dictionary objects(Data Elements, Message Class etc). If we do not use OTR concept for free texts, we would not be able to maintain translations for those texts.

For Texts/Labels which are derived from data elements,domains, search helps or message classes etc we don't need to maintain any translations specific to Web-dynpro applications. For these kind of elements translations are derived automatically from those objects.

OTR concept is required only for free texts like messages, field labels(not derived from dictionary objects) and other kind of texts.

To Maintain translations for these OTR texts, we use transaction code SOTR_EDIT. SE63 can also be used to translate OTR texts but SOTR is like a direct transaction.

Webdynpro is a cluster of various types of development objects. It has Classes/Methods(Assistance Class), Data Dictionary objects used, Message Classes, Views, Labels etc. When maintaining translations for a WD application, you have to consider all these.

For maintaining translations for Classes/Methods, Dictionary Objects, Messages you can use either SE63 or you can directly from their respective transactions.

For Example, if you maintaining translations for Assistance Class/methods, process is:

I have created an assistance class YSP_TEST, which has a single method and a message. Now, to maintain its translation, open that class using SE24 and then GOTO-TRANSLATION,

It opens up the pop-up where you have to specify target language and then you will see all the texts in the class, there maintain translation for all the texts.

For headings, descriptions and other you can still use SE63 for maintaining translations even for Class/Methods.

For other dictionary objects too you can use similar method as shown above and also SE63 to maintain translations.

Translations for OTR Texts:

Webdynpro Level: For OTR Texts, you can maintain translations at webdynpro level or complete package level. To Maintain at WD level, you need to have the list of OTR texts used, one is manual method and other method is, there is tool developed by SAP expert, Alessandro Lavazzi and below is the link for the same.

http://wiki.sdn.sap.com/wiki/display/WDABAP/OTR+Text+Translation+Tool+for+Web+Dynpro+ABAP

Manual method is,

  Step 1: Get the OTR Text name of that element from your view as shown below,(When developing a WD application, generally we first create OTR texts but if it is complex application, we might have to create them while coding).

  Step 2: Go to SOTR_EDIT transaction code and specify that OTR name in Alias field.

  Step 3: Click on Change, you will see the text in the OTR and from the top menu Goto Translations menu,

In the next pop-up select appropriate language and maintain its translation.

Once the translations are maintained, next step is to create Transport for the same which can be done using SLXT transaction code.

Translating OTR texts in a Package:

It is easier to Translate all the texts in a package. It can be using SE63 transaction,

In the next screen, specify Package Name under which you have created your OTR texts,

Once you click on Edit, you will see all the texts in that package from where you can maintain your translations. Creating Transport for this is same as we did above.

I will keep updating this blog with how to methods of translating various objects of SAP.

Introduction to SAP NWBC

Most of the SAP'ers first questions would be, What does NWBC stands for? well, Netweaver Business Client is the full form on acronym NWBC.

NWBC vs SAP GUI:

NWBC is a desktop client just like SAP GUI which can be used as a one stop shop to logon any SAP systems available for that client similar to GUI but has additional use cases compared to NWBC.
Using Single Sign On concept you can access multiple systems transactions using single log on. Also described as Access to one main systems and casual access to other systems. It can be used to access Dialog Transactions, Webdynpro Applications, Portal based applications, Mobile applications and many more at one place. In easy terms, it means that we will have the ability to integrate multiple UI technologies into a single client.

Simple difference between NWBC and SAP GUI is the way you can access Webdynpro Application. Using SAP GUI, when you execute WD application it opens in a browser whereas on NWBC it opens within the GUI just like a normal dynpro transaction if that application is added to your role.

NWBC works on Role based access. That is, when you log in to particular system using NWBC, you will see only those transactions in the roles assigned to you and also basically,  NWBC look and feel is defined using roles.

NWBC Releases:

So far SAP has released 3 versions of NWBC which are, 3.0, 3.5 and 4.0. All the screen shots and notes in my blog are from 3.5 version. One main difference between 3.5 and 4.0 is, to be able to use NWBC 4.0, you should have latest version of GUI which is 740.

NWBC Types:

There are 2 types of NWBC versions, one is Desktop Based and the other is HTML based. HTML based is where we can access NWBC using web browser and Desktop based needs Application needs to be installed on our machines.

NWBC Screen glimpses: 

Let me try to show as how does it look when you login to NWBC and what are each sections called using some screen shots,

There are 4 main sections,

1. Navigation Panel (Left Side Panel)
2. Navigation Tabs (Tabs on the top to navigate through various folders)
3. Canvas - Actual section where we see the transaction.
4. Quick Launch bar - It would be generally above Navigation Tabs.

Just like on your browser where you can Hide/Show various sections/add-ons, even in NWBC we have the option to hide most of the sections in the Personalize option.

How to Configure/Set-up NWBC:

Now, coming to the key point of this blog as how to configure/setup an NWBC for your client, NWBC is a free software which can be downloaded from Service Market place. To be able to use NWBC for your system, one particular service needs to be activated on your system using SICF transaction which is, /sap/bc/nwbc and its components under it.

Note: Before activating this service, there are other generic settings for an SAP system like FQDN set-up, HTTP setting for the system etc which are common to get Webdynpro and other web related applications work which are mostly done during initial system set-up itself.

Once you have this service activated, next step is to set-up roles as per business scenario using PFCG transaction.

Setting up Roles:

Step 1: Create Role using PFCG.

Step 2: Maintain Menu Item in the role. Key point to remember when setting up Menu is, You have to first create a folder and then add Transactions inside that folder, only then those tcodes show up in the folder of NWBC.

Step 3: Now, add Transactions, Webdynpro applications, HTML pages and many more inside the folders.

Step 4: Assign User to this Role: Click on the User Tab and add the user name to whom this role needs to be added.

That completes list of basic steps performed to configure NWBC. When you login to this system through NWBC, it would look some what similar to the screen shown below:

You can see the Folders added in PFCG on the Navigation tabs. When you click on a particular tab, it will show all the transactions in that folder below that tab and also on the navigation panel.

SAP did provide many options to customize even particular folder. In PFCG transaction, when you double click a particular folder it will show you all the options to customize even the folder,

Also, in PFCG, Menu Tab where you add folders, you have lot of other options too shown below which can also be used to customize NWBC look.

Side Panel Concept on NWBC: 

Side Panel is another important concept which is, on your NWBC you can add a Side Panel which will show an option to add your own navigational links on to the right part of the screen which can be viewed on demand basis. This Side Panel can be added specific to your client or also at Role Level in PFCG.

Before I confuse you more, let me show a screen shot of the same :), in the below screen shots I am adding Side Panel to just my login,

On your NWBC login, navigate to Settings, Connections, Side Panel, it will bring up a pop-up where you can add Side Panel to your NWBC client. If you are doing this way, you can just add HTTP links to your side panel. In the below screen shot, I am adding bing.com as a side panel link to my client, once added you can see that a button on the right is added which will open your side panel.

After adding, it looks like:

Adding Side Panel at PFCG Role Level:

Now, I am making a complete folder as a Side Panel on my PFCG Role,

My NWBC looks like, as you can see below I see 2 transactions, one in main canvas and the other in side panel.

As per few blogs I have seen, NWBC does provide an option to access multiple systems thorough single client logic based on Single Sign-On concept of SAP. That is one of the very useful feature which business would be interested as most of SAP clients have more than one SAP system, they would like the option of NWBC to access more than one system using single log on.

Thanks to Julie for her blog on SDN, which has very good information about NWBC:

http://scn.sap.com/docs/DOC-8193

ALV Configuration on Webdynpro

Introduction:

One of my post explains the process of displaying ALV on a webdynpro screen. Once you see the ALV output, next requirement from business would be, Can I sort the data? or Can I show different colors on the output? or Summation of totals and various other requirements related to the ALV output.

ALV's using Function Module:

If you are displaying ALV using function module on a dynpro, it is pretty straight forward where you pass your field catalog, layout options and data to SAP standard function module and it has all the logic to display ALV. If you have to do some additional functionality, then you might have to call few other function modules either before or after ALV display.

ALV's Using Global Class/Methods option:

If using class and methods to display ALV on a regular dynpro, there is a main method to which you pass data, field catalog, layout and it displays ALV. This standard class does have other methods which can be used to configure ALV display as per user requirements, like coloring columns, Sorting, Sum/Total of columns etc. You would have to call those methods with the same instance of the class which you use for ALV display.

ALV's on WD:

Whereas on WD ALV, display of ALV is handled in a different manner as WD is based on OVC concept and also it utilizes Oop's concepts in development. It might be little complex to other methods we have seen above, but this provides more options and features to the final ALV display.

Coming to actual concept of WD ALV,

Just like a function module, SAP has developed a standard WD component SALV_WD_TABLE which needs to be included in your used components list and then map your internal table to DATA context and it shows that data in an ALV. So far its simple but if you want to configure the look of ALV, like coloring ALV  rows or columns, setting sort etc it needs some additional logic

For WD ALV, SAP has used the core object oriented concept in coding, the reason I am saying this is because I see that there are classes for even for small requirements like, for getting, setting column's configuration, there is a method CL_SALV_WD_COLUMN, for creating header for ALV, there is a class with its own methods which is, CL_SALV_WD_HEADER and so on.
But to be able to use this classes and methods, first you have to get MODEL of that alv.

In lay man terms, I will try to explain the concept SAP followed : (for people who are good in OOP's what I am saying now might look childish :) but this helps for people who started working in ABAP directly).
In main WD Component SAP has provided an interface method which is GET_MODEL whose output is a Class which SAP has referred in its WD component to handle ALV configuration. Class name is, CL_SALV_WD_CONFIG_TABLE. Now, inside that class there are lot of inherited methods which again have another class as exporting value, like IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN method has CL_SALV_WD_COLUMN as output. Now, if you want to perform any column operations for your ALV, you would have to call the methods in the latter class. Basically, SAP collected all the requirements related to ALV, then grouped them based on its topic and then developed a global class for each topic or scenario and then inherited all the classes in the main SALV_WD_TABLE WD component. Now, if you want to use those methods you just have to create instances for each class and call respective methods.

Now the interesting part, that is actual coding :) to understand what I am talking above: 

Here I am trying to handle a requirement where we have to color code ALV Columns based on certain condition. I am taking standard SPFLI data and coloring few columns based on certain condition.

First step is to develop a simple WD ALV application which shows SPFLI data( I already have a post explaining how to display a simple ALV) which looks as shown below.

Now I am coloring certain rows based on Carr id. To make it more interesting, When coloring comes to picture, question every one has is what colors are allowed. There is standard domain, WDUI_TABLE_CELL_DESIGN which has the list of colors. To make our ALV little interesting, I added a parameter to our WD View to select what color needs to be shown and based on that displayed ALV. My View looks as shown below,

Input field refers to domain WDUI_TABLE_CELL_DESIGN which provides automatic F4 for that field and the view container for ALV. User needs to specify color number and click on a button to show ALV output. I have all my logic in the method which triggers when that button is clicked.

Step 1: Get the color field value into a variable.

Step 2: Now, we have to create an instance for the wd component salv_wd_table. In my wd, wd_alv_output is the name i used for that component usage.

* Declaring variable for component usage.
  DATA lo_cmp_usage TYPE REF TO if_wd_component_usage.

* Moving ALV_OUTPUT component usage instance to local variable.
  lo_cmp_usage =   wd_this->wd_cpuse_alv_output( ).

  IF lo_cmp_usage->has_active_component( ) IS INITIAL.
    lo_cmp_usage->create_component( ).
  ENDIF.


Step 3: Now, I want to access the interface methods inside that SALV* component for which I have to create an instance for its interface controller.

* Variable for the interface controller of SALV
  DATA lo_interfacecontroller TYPE REF TO iwci_salv_wd_table .

* Creating an instance for local variable.
  lo_interfacecontroller =   wd_this->wd_cpifc_alv_output( ).

Until above, we can use Generator to generate code automatically.

Step 4: As mentioned in above explanation, I have to call method GET_MODEL which is SALV interface method which will give access to all the methods as shown below,

* Get Model is done here
  DATA lv_value TYPE REF TO cl_salv_wd_config_table.

* lv_value is the instance of the class cl_salv_wd_config_table.
  lv_value = lo_interfacecontroller->get_model(  ).

Step 5 : Now you can access any method of that class, one example is, if I want to disable the Filter button which you see on the right corner of ALV, you just have to call a method as shown below,

* Setting the indicator to disable Filter button.
if_salv_wd_std_functions~set_filter_filterline_allowed ( value = abap_false ).

Step 6: Coming to our requirement which is to color a column, first you need a field in your context menu which can handle as what color needs to be shown. In my test case, I have created field named,

First, fill your internal table with data. Then loop through table to fill that field with the color which you want to show on the output,

  SELECT *
    FROM spfli INTO TABLE li_spfli_copy.

* Here I am filling a color based on carr-id.
  LOOP AT li_spfli_copy INTO li_spfli.
    IF li_spfli-carrid EQ 'AZ'.
      li_spfli-cell_design = lv_color.
    ELSEIF li_spfli-carrid EQ 'LH'.
      li_spfli-cell_design = cl_wd_table_column=>e_cell_design-goodvalue_light.
    ENDIF.
    APPEND li_spfli TO lt_spfli.
  ENDLOOP.


Step 7: Now, the main part where you have to set the columns which you want to color code. This is a little tricky method,

First you have the get column settings(Basically, you are inheriting the properties of SALV_WD_TABLE which you create its instance)

* SALV has used cl_salv_wd_column and its method to set properties of columns, here you are trying to inherit that into your wd.

  DATA:
     l_column TYPE REF TO cl_salv_wd_column,


* lv_value is filled when you did get model. Inside that, you are calling get_column method to get the instance * of the columns and then call the methods inside that class to make settings to that column.

  l_column = lv_value->if_salv_wd_column_settings~get_column('CARRID').
  l_column->set_cell_design_fieldname( value = 'CELL_DESIGN').

* Similarly setting other columns also to point to that field.
  l_column = lv_value->if_salv_wd_column_settings~get_column('CONNID').
  l_column->set_cell_design_fieldname( value = 'CELL_DESIGN').

Now, the final output looks as shown below:

You can email me if you have any questions or if I have something wrong in my post. Hope this was helpful for you guys :).

ALV in Webdynpro Application

ALV Output display is one of the most used concept in SAP to meet business requirements. Currently to develop ALV on a normal dynpro output, there are various methods in ABAP. Initially Functional Modules were used to develop ALV's, later SAP introduced Object Oriented classes to develop ALV and introduction of OOP's did help in adding quite new features

Simple ALV on a Webdynpro application is quite simple to develop. In the below example, I am trying to display SPFLI output on an ALV.

First Step is to Create a new Webdynpro Application through SE80 with a View and a Window.

In this example, I have my data retrieval logic inside Main View(WDDOINIT) but you can also have that in Component Controller itself and fill the Context node in a WDDOINIT of Component Controller.

After WD Component is created, go to the Used Component section in the WD definition and add Component Usage for SALV_WD_TABLE.

About SALV_WD_TABLE: For some of the core features of ABAP, SAP has already developed re-usable components which can be used to get required functionality. Another example for this is, WDR_SELECT_OPTIONS using which we can display Select-Options on our Webdynpro Application.

Create a Context Node of Type SPFLI and add all its fields to the node(You can use Add Attributes from Structure button to add all the fields of that table in the node). Dont forget to make the Cardinality as 0..n to indicate that its a table and not structure type.

Next Step is to Create a View and add Context Node type SPFLI and Bind it to the Component Controller Context node.(You can even directly use Context node created in Controller directly here just by dragging and dropping).

Here, I am dragging Node from Controller to View.

Now, click on the MAIN View, and add an element of type ViewContainerUIElement and give an ID to it.

Important point here is, whenever you add a View ContainerUI Element, it provides and option for you to embed another view(which displays data) to it in the Window section.

Until here, we are done with the part of creating Context Node, View, adding a view container to the view. Next step is to fill the Context node table with the data.

In the WDDOINIT, write code to get data and then bind it to context node table. Binding part can be done easily using code generation wizard provided by SAP as shown below.

and the code generated is,

  DATA lo_nd_spfli TYPE REF TO if_wd_context_node.

  DATA lt_spfli TYPE wd_this->elements_spfli.

* navigate from <CONTEXT> to <SPFLI> via lead selection
  lo_nd_spfli = wd_context->get_child_node( name = wd_this->wdctx_spfli ).

  SELECT * FROM spfli INTO TABLE lt_spfli.

  lo_nd_spfli->bind_table( new_items = lt_spfli set_initial_elements = abap_true ).

With this we are done with the part of filling context node, next step is to Bind the Context Node with the SALV_WD_TABLE context node.

Logic here is, when we develop ALV using function module, we pass our output internal table data to the function modules ALV data table and that data will be shown on the output screen in an ALV, similarly in Webdynpro once you bind Context Node table data to SALV* data node, output is shown in ALV. Binding is done as below,

Whenever you add a Component Usage(Another WD Component) to the Webdynpro, interface controller of that WD component will be available in our WD too and you can see that in the left tree under component usages node.

Double click on the Interfacecontroller_Usage node and in the context, Map SPFLI node to Data Node of SALV* component as shown below,

I have dragged SPFLI node to Data Node.

Now, in the window, navigate to the ALV View container, right click on that and click on Embed View and then in the pop-up select the ALV data view, once you do that it will look somewhat shown as below

That is the last step in the development, we are ready with an SPFLI ALV output. Once you create a WD Application for this component and execute it, it looks like below screen shot.

In my next blog, I will write as how to handle configurations to the ALV, similar to Layout options we do on dynpro ALV.