abap2UI5

Feed

This sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.

Z2UI5_CL_SMPC_APP_024

Controls sap.m UI5 1.71

The facts

Repository
abap2UI5/samples-controls
Class
Z2UI5_CL_SMPC_APP_024
Source file
z2ui5_cl_smpc_app_024.clas.abap
Library
sap.m
UI5 entity
sap.m.FeedInput
Demo kit sample
sap.m.sample.Feed
SAP's own sample
running at sdk.openui5.org ↗
Minimum UI5
1.71 — the floor abap2UI5 holds its samples to
In the playground
runs in the browser, with no system and nothing installed

Keywords: feedinput, feed, input, sap.m, allows, user, list, feedlistitem

Controls it builds

Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.

Libraries

Run it here

The sample running, in this page — the app on its own, with no editor over it. Switch to Playground with this code

Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.

The ABAP

z2ui5_cl_smpc_app_024.clas.abap — 138 lines Read it on GitHub ↗
" @keywords feedinput feed input sap.m allows user list feedlistitem
" @summary This sample shows you how to build a complete feed user interface by combining a FeedInput with a list of FeedListItems.
CLASS z2ui5_cl_smpc_app_024 DEFINITION PUBLIC.

  PUBLIC SECTION.
    INTERFACES z2ui5_if_app.

    TYPES:
      BEGIN OF ty_s_entry,
        author         TYPE string,
        author_pic_url TYPE string,
        type           TYPE string,
        date           TYPE string,
        text           TYPE string,
      END OF ty_s_entry.
    DATA t_entries TYPE STANDARD TABLE OF ty_s_entry WITH EMPTY KEY.

  PROTECTED SECTION.
    DATA client TYPE REF TO z2ui5_if_client.

    METHODS view_display.
    METHODS on_event.
    METHODS model_init.

  PRIVATE SECTION.
ENDCLASS.


CLASS z2ui5_cl_smpc_app_024 IMPLEMENTATION.

  METHOD z2ui5_if_app~main.

    me->client = client.
    IF client->check_on_init( ).
      model_init( ).
      view_display( ).
    ELSEIF client->check_on_navigated( ).
      view_display( ).
    ELSEIF client->check_on_event( ).
      on_event( ).
    ENDIF.

  ENDMETHOD.


  METHOD view_display.

    DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).

    view->ele( n = `View` ns = `mvc`
        )->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
        )->a( n = `xmlns`     v = `sap.m`

        )->tag( `FeedInput`
            )->a( n = `post`  v = client->_event( val = `POST` arg = `${$parameters>/value}` )
            )->a( n = `icon`  v = `https://sdk.openui5.org/test-resources/sap/m/images/dronning_victoria.jpg`
            )->a( n = `class` v = `sapUiSmallMarginTopBottom`

        )->ele( `List`
            )->a( n = `showSeparators` v = `Inner`
            )->a( n = `items`          v = client->_bind( t_entries )

            )->tag( `FeedListItem`
                )->a( n = `sender`                   v = `{AUTHOR}`
                )->a( n = `icon`                     v = `{AUTHOR_PIC_URL}`
                )->a( n = `senderPress`              v = client->_event( val = `SENDER_PRESS` arg = `${$source>/sender}` )
                )->a( n = `iconPress`                v = client->_event( val = `ICON_PRESS` arg = `${$source>/sender}` )
                )->a( n = `info`                     v = `{TYPE}`
                )->a( n = `timestamp`                v = `{DATE}`
                )->a( n = `text`                     v = `{TEXT}`
                )->a( n = `convertLinksToAnchorTags` v = `All` ).

    client->view_display( view->stringify( ) ).

  ENDMETHOD.


  METHOD on_event.

    CASE client->get_event( ).

      WHEN `POST`.
        " original: DateFormat.getDateTimeInstance({ style: 'medium' }).format(new Date()) - rebuilt server-side
        DATA(month_names) = VALUE string_table( ( `Jan` ) ( `Feb` ) ( `Mar` ) ( `Apr` ) ( `May` ) ( `Jun` ) ( `Jul` ) ( `Aug` ) ( `Sep` ) ( `Oct` ) ( `Nov` ) ( `Dec` ) ).
        DATA(hour) = CONV i( sy-uzeit(2) ).
        DATA(meridiem) = COND string( WHEN hour < 12 THEN `AM` ELSE `PM` ).
        hour = COND #( WHEN hour MOD 12 = 0 THEN 12 ELSE hour MOD 12 ).
        DATA(date_formatted) = |{ month_names[ sy-datum+4(2) ] } { CONV i( sy-datum+6(2) ) }, { sy-datum(4) }, { hour }:{ sy-uzeit+2(2) }:{ sy-uzeit+4(2) } { meridiem }|.
        INSERT VALUE #( author         = `Alexandrina Victoria`
                        author_pic_url = `http://upload.wikimedia.org/wikipedia/commons/a/aa/Dronning_victoria.jpg`
                        type           = `Reply`
                        date           = date_formatted
                        text           = client->get_event_arg( ) )
               INTO t_entries INDEX 1.

      WHEN `SENDER_PRESS`.
        client->message_toast_display( |Clicked on Link: { client->get_event_arg( ) }| ).

      WHEN `ICON_PRESS`.
        client->message_toast_display( |Clicked on Image: { client->get_event_arg( ) }| ).

    ENDCASE.

  ENDMETHOD.


  METHOD model_init.

    t_entries = VALUE #(
      ( author         = `Alexandrina Victoria`
        author_pic_url = `https://sdk.openui5.org/test-resources/sap/m/images/dronning_victoria.jpg`
        type           = `Request`
        date           = `March 03 2013`
        text           = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` &&
                         `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ` &&
                         `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, seddiamnonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ` &&
                         `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ` &&
                         `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. ` &&
                         `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.` )
      ( author         = `George Washington`
        author_pic_url = `https://sdk.openui5.org/test-resources/sap/m/images/george_washington.jpg`
        type           = `Reply`
        date           = `March 04 2013`
        text           = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore` )
      ( author         = `Alexandrina Victoria`
        author_pic_url = `https://sdk.openui5.org/test-resources/sap/m/images/dronning_victoria.jpg`
        type           = `Request`
        date           = `March 05 2013`
        text           = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat` )
      ( author         = `George Washington`
        author_pic_url = `https://sdk.openui5.org/test-resources/sap/m/images/george_washington.jpg`
        type           = `Rejection`
        date           = `March 07 2013`
        text           = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.` ) ).

  ENDMETHOD.

ENDCLASS.

More in sap.m

Search every abap2UI5 sample · the full list on one page

On this page