QuickViewCard
QuickViewCard embedded in container
Z2UI5_CL_SMPC_APP_099
Controls
sap.m
UI5 1.92
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_099- Source file
z2ui5_cl_smpc_app_099.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.QuickViewCard- Demo kit sample
sap.m.sample.QuickViewCard- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.92
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: quickviewcard, quick, card, sap.m, inline, links, button, panel, quickviewpage, avatar, quickviewgroup, quickviewgroupelement
Controls it builds
- sap.m.Avatar
- sap.m.Button
- sap.m.Page
- sap.m.Panel
- sap.m.QuickViewCard
- sap.m.QuickViewGroup
- sap.m.QuickViewGroupElement
- sap.m.QuickViewPage
- sap.ui.core.mvc.View
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_099.clas.abap — 205 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords quickviewcard quick card sap.m inline links button panel quickviewpage avatar quickviewgroup quickviewgroupelement
" @summary QuickViewCard embedded in container
CLASS z2ui5_cl_smpc_app_099 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES: BEGIN OF ty_s_element,
label TYPE string,
value TYPE string,
url TYPE string,
elementtype TYPE string,
pagelinkid TYPE string,
emailsubject TYPE string,
target TYPE string,
END OF ty_s_element.
TYPES ty_t_element TYPE STANDARD TABLE OF ty_s_element WITH EMPTY KEY.
TYPES: BEGIN OF ty_s_group,
heading TYPE string,
elements TYPE ty_t_element,
END OF ty_s_group.
TYPES ty_t_group TYPE STANDARD TABLE OF ty_s_group WITH EMPTY KEY.
TYPES: BEGIN OF ty_s_page,
pageid TYPE string,
header TYPE string,
title TYPE string,
titleurl TYPE string,
icon TYPE string,
displayshape TYPE string,
description TYPE string,
groups TYPE ty_t_group,
END OF ty_s_page.
DATA t_pages TYPE STANDARD TABLE OF ty_s_page WITH EMPTY KEY.
DATA back_enabled TYPE abap_bool.
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_099 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` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `height` v = `100%`
)->ele( `Page`
)->a( n = `showHeader` v = `false`
)->a( n = `showNavButton` v = `false`
)->a( n = `class` v = `sapUiContentPadding`
)->tag( `Button`
)->a( n = `id` v = `buttonBack`
)->a( n = `enabled` v = client->_bind( back_enabled )
)->a( n = `text` v = `Navigate Back`
)->a( n = `press` v = client->_event( `BACK` )
)->a( n = `class` v = `sapUiSmallMarginBottom`
" the QuickViewCard fragment is inlined into the main view (no separate core:Fragment include)
)->ele( `Panel`
)->a( n = `id` v = `quickViewCardContainer`
)->a( n = `width` v = `auto`
)->a( n = `height` v = `650px`
)->ele( `QuickViewCard`
)->a( n = `id` v = `quickViewCard`
)->a( n = `pages` v = client->_bind( t_pages )
" onNavigate reads the navOrigin link and names it in the toast;
" a BACK navigation has no navOrigin, which the ternary reproduces
)->a( n = `navigate` v = client->_event( val = `NAVIGATE` arg = `${$parameters>/navOrigin} ? ${$parameters>/navOrigin}.getText() : ''` )
)->a( n = `afterNavigate` v = client->_event( val = `AFTER_NAV` arg = `${$parameters>/isTopPage}` )
)->ele( `QuickViewPage`
)->a( n = `pageId` v = `{PAGEID}`
)->a( n = `header` v = `{HEADER}`
)->a( n = `title` v = `{TITLE}`
)->a( n = `titleUrl` v = `{TITLEURL}`
)->a( n = `description` v = `{DESCRIPTION}`
)->a( n = `groups` v = `{path: 'GROUPS', templateShareable: true}`
)->ele( `avatar`
)->tag( `Avatar`
)->a( n = `src` v = `{ICON}`
)->a( n = `displayShape` v = `{DISPLAYSHAPE}`
)->end(
)->ele( `QuickViewGroup`
)->a( n = `heading` v = `{HEADING}`
)->a( n = `elements` v = `{path: 'ELEMENTS', templateShareable: true}`
)->tag( `QuickViewGroupElement`
)->a( n = `label` v = `{LABEL}`
)->a( n = `value` v = `{VALUE}`
)->a( n = `url` v = `{URL}`
)->a( n = `type` v = `{ELEMENTTYPE}`
)->a( n = `pageLinkId` v = `{PAGELINKID}`
)->a( n = `emailSubject` v = `{EMAILSUBJECT}`
)->a( n = `target` v = `{TARGET}`
)->end(
)->end(
)->end(
)->end(
)->end( ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `BACK`.
client->follow_up_action( val = client->cs_event-control_by_id
t_arg = VALUE #( ( `quickViewCard` ) ( `navigateBack` ) ) ).
WHEN `NAVIGATE`.
" onNavigate: the clicked link's text, or the back button
DATA(origin) = client->get_event_arg( ).
client->message_toast_display( COND string( WHEN origin IS NOT INITIAL
THEN |Link '{ origin }' was clicked|
ELSE `Back button was clicked` ) ).
WHEN `AFTER_NAV`.
" enable the back button while the card is not on its top page (original afterNavigate isTopPage)
back_enabled = xsdbool( client->get_event_arg( ) = abap_false ).
ENDCASE.
ENDMETHOD.
METHOD model_init.
" target seeds the UI5 default '_blank' explicitly - a serialized empty
" string would override the QuickViewGroupElement.target default
t_pages = VALUE #(
( pageid = `companyPageId`
header = `Company info`
title = `Adventure Company`
titleurl = `http://sap.com`
icon = `sap-icon://building`
displayshape = `Square`
description = `John Doe`
groups = VALUE #(
( heading = `Contact Details`
elements = VALUE #(
( label = `Phone` value = `+001 6101 34869-0` elementtype = `phone` target = `_blank` )
( label = `Address` value = `550 Larkin Street, 4F, Mountain View, CA, 94102 San Francisco USA` elementtype = `text` target = `_blank` ) ) )
( heading = `Main Contact`
elements = VALUE #(
( label = `Name` value = `John Doe` elementtype = `pageLink` pagelinkid = `companyEmployeePageId` target = `_blank` )
( label = `Mobile` value = `+001 6101 34869-0` elementtype = `mobile` target = `_blank` )
( label = `Phone` value = `+001 6101 34869-0` elementtype = `phone` target = `_blank` )
( label = `Email` value = `main.contact@company.com` elementtype = `email` emailsubject = `Subject` target = `_blank` )
( label = `Additional info` value = `` elementtype = `text` target = `_blank` ) ) ) ) )
( pageid = `companyEmployeePageId`
header = `Employee Info`
title = `John Doe`
icon = `sap-icon://person-placeholder`
displayshape = `Circle`
description = `Department Manager`
groups = VALUE #(
( heading = `Company`
elements = VALUE #(
( label = `Name` value = `Adventure Company` url = `http://sap.com` elementtype = `link` target = `_blank` )
( label = `Address` value = `Sofia, Boris III, 136A` elementtype = `text` target = `_blank` )
( label = `Slogan` value = `Innovation through technology` elementtype = `text` target = `_blank` ) ) )
( heading = `Other`
elements = VALUE #(
( label = `Email` value = `john.doe@sap.com` elementtype = `email` emailsubject = `Subject` target = `_blank` )
( label = `Phone` value = `+359 888 888 888` elementtype = `mobile` target = `_blank` ) ) ) ) ) ).
ENDMETHOD.
ENDCLASS.
More in sap.m
- Tab Container — The sap.m.TabContainer allows for working with multiple tabs.
- Popover Controlling Closing Behavior — In some cases the closing behavior of the Popover can lead to drill down navigation. This…
- Time Picker Sliders — TimePickerSliders used in a Dialog.
- SplitContainer standard use case — SplitContainer maintains two NavContainers if running on tablet or desktop and one NavCon…
- SplitApp standard use case — The SplitApp is the base for each master detail application. It extends the sap.m.SplitCo…
- View Settings Dialog - Standard — The View Settings Dialog is a standard UI pattern for specifying sorting, grouping and fi…
- QuickView — QuickView basic samples.
- Wizard standard use case — The Wizard is useful for breaking down complex tasks into smaller steps.
- Late Model Update — The sample demonstrates how to rebind a control to a different data source after a certai…
- Select Dialog — The Select Dialog allows the user to search for and pick an item from a possibly long opt…
- Table Select Dialog — Similar to the Select Dialog, the Table Select Dialog presents selectable items in a tabl…
- Semantic Page Full Screen — Semantic Page Full Screen
On this page