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
Click a number to link to a line — shift-click for a range.
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
- Date Time Picker — With the DateTimePicker a Date can be entered or selected including the time part.
- Dialog with Confirm Options — Creating a dialog with confirm and reject options that replaces the confirmDialog functio…
- Display List Item — Use the Display List Item for showing name/value pairs.
- Draft Indicator — The Draft Indicator shows that eighter currently a draft is saving or that it is already…
- Facet Filter - Light — This is a 'Light' version of the Facet Filter. It is for small displays where only a sele…
- Feed Content — Shows the tile containing the text of the feed, a subheader, and a numeric value.
- Feed List Item — The Feed List Item provides a standard UI for 'feeds' where multiple users publish inform…
- Flex Box - Nested — Flex Boxes can be nested. Remember also that HBox and VBox are 'convenience' controls bas…
- Generic Tag with Different Configurations — Previews of the GenericTag control based on combinations of different sets of properties.
- KPI Tile — Shows KPI Tile samples that can contain header, subheader, key value, trend, scale, unit…
- Header Container - Horizontal Mode — The Header Container with horizontal layout. It provides horizontal scrolling on mobile d…
- Icon Tab Bar - Stretch Content Height — In this example, the IconTabBar height is stretched to the maximum height of the page con…
On this page