Skip to content

Commit 4f7f87a

Browse files
cwildtChristian Wildt
cwildt
and
Christian Wildt
authored
Added Sample Avatar Group (#466)
* Added Avatar Group Sample https://sdk.openui5.org/entity/sap.f.AvatarGroup/sample/sap.f.sample.AvatarGroup * Sample AvatarGroup * float -> int --------- Co-authored-by: Christian Wildt <[email protected]>
1 parent a7b5c8f commit 4f7f87a

File tree

2 files changed

+315
-0
lines changed

2 files changed

+315
-0
lines changed

‎src/z2ui5_cl_demo_app_320.clas.abap

+299
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
CLASS z2ui5_cl_demo_app_320 DEFINITION
2+
PUBLIC FINAL
3+
CREATE PUBLIC.
4+
5+
PUBLIC SECTION.
6+
INTERFACES if_serializable_object.
7+
INTERFACES z2ui5_if_app.
8+
9+
DATA check_initialized TYPE abap_bool.
10+
DATA viewPortPercentWidth TYPE i VALUE 100.
11+
12+
TYPES: BEGIN OF ty_item,
13+
id TYPE string,
14+
initials TYPE char2,
15+
fallbackicon TYPE string,
16+
src TYPE string,
17+
name TYPE string,
18+
tooltip TYPE string,
19+
jobposition TYPE string,
20+
mobile TYPE string,
21+
phone TYPE string,
22+
email TYPE string,
23+
END OF ty_item.
24+
TYPES ty_items TYPE STANDARD TABLE OF ty_item WITH DEFAULT KEY.
25+
26+
DATA item TYPE ty_item.
27+
DATA items TYPE ty_items.
28+
DATA group_items TYPE ty_items.
29+
DATA content_height TYPE string.
30+
DATA content_width TYPE string.
31+
32+
PROTECTED SECTION.
33+
DATA client TYPE REF TO z2ui5_if_client.
34+
35+
METHODS display_avatar_group_view.
36+
37+
METHODS display_individual_popover
38+
IMPORTING !id TYPE string.
39+
40+
METHODS display_group_popover
41+
IMPORTING !id TYPE string.
42+
43+
METHODS on_event.
44+
45+
PRIVATE SECTION.
46+
METHODS calculate_content_height
47+
IMPORTING !lines TYPE i
48+
RETURNING VALUE(result) TYPE string.
49+
50+
ENDCLASS.
51+
52+
53+
CLASS z2ui5_cl_demo_app_320 IMPLEMENTATION.
54+
METHOD z2ui5_if_app~main.
55+
me->client = client.
56+
57+
IF check_initialized = abap_false.
58+
check_initialized = abap_true.
59+
items = VALUE #(
60+
mobile = `+89181818181`
61+
phone = `+2828282828`
62+
email = `blabla@blabla`
63+
( id = `1` initials = `JD` name = `John Doe` tooltip = `1` jobPosition = `Marketing Manager` )
64+
( id = `2` initials = `SP` name = `Sarah Parker` tooltip = `2` jobPosition = `Visual Designer` )
65+
( id = `3` initials = `JG` name = `Jason Goldwell` tooltip = `3` jobPosition = `Software Developer` )
66+
( id = `4` name = `Christian Bow` jobPosition = `Marketing Manager` tooltip = `4` )
67+
( id = `5`
68+
src = `https://sapui5.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_01.png`
69+
tooltip = `5`
70+
name = `Jessica Parker`
71+
jobPosition = `Visual Designer` )
72+
( id = `6` initials = `JB` name = `Jonathan Bale` jobPosition = `Software Developer` tooltip = `6` )
73+
( id = `7` initials = `GS` name = `Gordon Smith` jobPosition = `Marketing Manager` tooltip = `7` )
74+
( id = `8` fallbackIcon = `sap-icon =//person-placeholder` name = `Simon Jason` tooltip = `8` jobPosition = `Visual Designer` )
75+
( id = `9` initials = `JS` name = `Jason Swan` jobPosition = `Software Developer` tooltip = `9` )
76+
( id = `10` initials = `JC` name = `John Carter` jobPosition = `Marketing Manager` tooltip = `10` )
77+
( id = `11`
78+
src = `https://sapui5.hana.ondemand.com/test-resources/sap/f/images/Woman_avatar_02.png`
79+
name = `Whitney Parker`
80+
tooltip = `11`
81+
jobPosition = `Visual Designer` )
82+
( id = `12` fallbackIcon = `sap-icon =//person-placeholder` name = `Jason Goldwell` tooltip = `12` jobPosition = `Software Developer` )
83+
( id = `13` initials = `CD` name = `Chris Doe` jobPosition = `Marketing Manager` tooltip = `13` )
84+
( id = `14` initials = `SS` name = `Sarah Smith` jobPosition = `Visual Designer` tooltip = `14` )
85+
( id = `15` initials = `DC` name = `David Copper` jobPosition = `Software Developer` tooltip = `15` ) ).
86+
display_avatar_group_view( ).
87+
ENDIF.
88+
89+
on_event( ).
90+
ENDMETHOD.
91+
92+
METHOD display_avatar_group_view.
93+
DATA(view) = z2ui5_cl_xml_view=>factory( ).
94+
view->_z2ui5( )->title( `Avatar Group Sample` ).
95+
view->page( title = 'abap2UI5 - Sample: Avatar Group'
96+
navbuttonpress = client->_event( 'BACK' )
97+
shownavbutton = xsdbool( client->get( )-s_draft-id_prev_app_stack IS NOT INITIAL )
98+
)->slider( value = client->_bind_edit( viewPortPercentWidth )
99+
)->vertical_layout( id = `vl1`
100+
width = |{ client->_bind_edit( viewPortPercentWidth ) }%|
101+
class = `sapUiContentPadding`
102+
)->label( text = `AvatarGroup control in Individual mode`
103+
class = `sapUiSmallMarginBottom sapUiMediumMarginTop`
104+
)->avatar_group(
105+
id = `avatarGroup1`
106+
groupType = `Individual`
107+
avatarDisplaySize = `S`
108+
press = client->_event(
109+
val = `onIndividualPress`
110+
t_arg = VALUE #(
111+
( `${$source>/id}` )
112+
( `${$parameters>/groupType}` )
113+
( `${$parameters>/overflowButtonPressed}` )
114+
( `${$parameters>/avatarsDisplayed}` )
115+
( `$event.getParameter("eventSource").getId()` )
116+
( `$event.oSource.indexOfItem($event.getParameter("eventSource"))` ) ) )
117+
118+
items = client->_bind( items )
119+
)->avatar_group_item( initials = `{INITIALS}`
120+
fallbackIcon = `{FALLBACKICON}`
121+
src = `{SRC}`
122+
tooltip = `{NAME}`
123+
124+
)->get_parent(
125+
126+
)->label( text = `AvatarGroup control in Group mode`
127+
class = `sapUiSmallMarginBottom sapUiMediumMarginTop`
128+
)->avatar_group( id = `avatarGroup2`
129+
groupType = `Group`
130+
tooltip = `Avatar Group`
131+
avatarDisplaySize = `M`
132+
press = client->_event( val = `onGroupPress`
133+
t_arg = VALUE #(
134+
( `${$source>/id}` )
135+
( `${$parameters>/groupType}` )
136+
( `${$parameters>/overflowButtonPressed}` )
137+
( `${$parameters>/avatarsDisplayed}` ) ) )
138+
items = client->_bind( items )
139+
)->avatar_group_item( initials = `{INITIALS}`
140+
fallbackIcon = `{FALLBACKICON}`
141+
src = `{SRC}` ).
142+
client->view_display( view->stringify( ) ).
143+
ENDMETHOD.
144+
145+
METHOD display_individual_popover.
146+
DATA(individual_popover) = z2ui5_cl_xml_view=>factory_popup( ).
147+
individual_popover->popover( id = `individualPopover`
148+
class = `sapFAvatarGroupPopover`
149+
title = `Business card`
150+
titleAlignment = `Center`
151+
placement = `Bottom`
152+
contentWidth = `250px`
153+
contentHeight = `332px`
154+
)->card(
155+
)->content( ns = `f`
156+
)->vertical_layout( class = `sapUiContentPadding`
157+
)->HBox( alignItems = `Center`
158+
)->Avatar( src = client->_bind( item-src )
159+
initials = client->_bind( item-initials )
160+
badgetooltip = client->_bind( item-tooltip )
161+
fallbackIcon = client->_bind( item-fallbackicon )
162+
)->vbox( class = `sapUiTinyMarginBegin`
163+
)->Title( text = client->_bind_local( item-name )
164+
)->Text( text = client->_bind_local( item-jobposition )
165+
)->get_parent(
166+
)->get_parent(
167+
)->Title( text = `Contact Details`
168+
)->Label( text = `Mobile`
169+
)->Text( text = client->_bind( item-mobile )
170+
)->Label( text = `Phone`
171+
)->Text( text = client->_bind( item-phone )
172+
)->Label( text = `Email`
173+
)->Text( text = client->_bind( item-email ) ).
174+
175+
client->popover_display( xml = individual_popover->stringify( )
176+
by_id = id ).
177+
ENDMETHOD.
178+
179+
METHOD display_group_popover.
180+
DATA(view) = z2ui5_cl_xml_view=>factory_popup( ).
181+
182+
DATA(nav_container) = view->popover( id = `groupPopover`
183+
class = `sapFAvatarGroupPopover`
184+
showheader = abap_false
185+
contentWidth = client->_bind( content_width )
186+
contentHeight = client->_bind( content_height )
187+
placement = `Bottom`
188+
)->nav_container( id = `navContainer` ).
189+
190+
nav_container->page( id = `main`
191+
titleAlignment = `Center`
192+
title = |Team Members ({ lines( group_items ) })|
193+
)->vertical_layout( class = `sapUiTinyMarginTop`
194+
width = `100%`
195+
)->grid( default_Span = `XL6 L6 M6 S12`
196+
content = client->_bind( group_items )
197+
198+
)->hbox( alignItems = `Center`
199+
)->vbox(
200+
)->avatar( class = `sapUiTinyMarginEnd`
201+
initials = `{INITIALS}`
202+
fallbackIcon = `{FALLBACKICON}`
203+
src = `{SRC}`
204+
badgetooltip = `{NAME}`
205+
backgroundcolor = `{BACKGROUNDCOLOR}`
206+
press = client->_event( val = `onAvatarPress`
207+
t_arg = VALUE #( ( `${ID}` ) ) )
208+
)->get_parent(
209+
)->vbox(
210+
)->Text( text = `{NAME}`
211+
)->Text( text = `{JOBPOSITION}` ).
212+
213+
nav_container->page( id = `detail`
214+
showNavButton = abap_true
215+
navButtonPress = client->_event( val = `onNavBack` )
216+
titleAlignment = `Center`
217+
title = |Team Members ({ lines( group_items ) })|
218+
)->card(
219+
)->content( ns = `f`
220+
)->vertical_layout( class = `sapUiContentPadding`
221+
)->HBox( alignItems = `Center`
222+
)->Avatar( src = client->_bind( item-src )
223+
initials = client->_bind( item-initials )
224+
badgetooltip = client->_bind( item-tooltip )
225+
fallbackIcon = client->_bind( item-fallbackicon )
226+
)->vbox( class = `sapUiTinyMarginBegin`
227+
)->Title( text = client->_bind( item-name )
228+
)->Text( text = client->_bind( item-jobposition )
229+
)->get_parent(
230+
)->get_parent(
231+
)->Title( text = `Contact Details`
232+
)->Label( text = `Mobile`
233+
)->Text( text = client->_bind( item-mobile )
234+
)->Label( text = `Phone`
235+
)->Text( text = client->_bind( item-phone )
236+
)->Label( text = `Email`
237+
)->Text( text = client->_bind( item-email ) ).
238+
239+
client->popover_display( xml = view->stringify( )
240+
by_id = id ).
241+
ENDMETHOD.
242+
243+
METHOD on_event.
244+
DATA(lt_arg) = client->get( )-t_event_arg.
245+
CASE client->get( )-event.
246+
WHEN 'BACK'.
247+
client->nav_app_leave( ).
248+
249+
WHEN `onGroupPress`.
250+
DATA(group_id) = lt_arg[ 1 ].
251+
group_items = items.
252+
content_height = calculate_content_height( lines( group_items ) ).
253+
content_width = '450px'.
254+
255+
display_group_popover( id = group_id ).
256+
client->popover_destroy( ).
257+
258+
WHEN `onIndividualPress`.
259+
DATA(overflow_button_pressed) = lt_arg[ 3 ].
260+
DATA(items_displayed) = lt_arg[ 4 ].
261+
DATA(item_id) = lt_arg[ 5 ].
262+
DATA(item_table_index) = lt_arg[ 6 ].
263+
264+
group_items = VALUE ty_items( FOR itm IN items FROM items_displayed + 1
265+
( itm ) ).
266+
content_height = calculate_content_height( lines( group_items ) ).
267+
content_width = '450px'.
268+
269+
IF overflow_button_pressed = abap_true.
270+
display_group_popover( id = item_id ).
271+
ELSE.
272+
item = VALUE #( items[ item_table_index + 1 ] OPTIONAL ).
273+
display_individual_popover( id = item_id ).
274+
ENDIF.
275+
client->popover_destroy( ).
276+
277+
WHEN `onAvatarPress`.
278+
DATA(id) = lt_arg[ 1 ].
279+
item = VALUE #( items[ id = id ] OPTIONAL ).
280+
content_height = `370px`.
281+
content_width = `250px`.
282+
283+
client->popover_model_update( ).
284+
client->follow_up_action( client->_event_client( val = `POPOVER_NAV_CONTAINER_TO`
285+
t_arg = VALUE #( ( `navContainer` ) ( `detail` ) ) ) ).
286+
WHEN `onNavBack`.
287+
content_height = calculate_content_height( lines( group_items ) ).
288+
content_width = `450px`.
289+
290+
client->popover_model_update( ).
291+
client->follow_up_action( client->_event_client( val = `POPOVER_NAV_CONTAINER_TO`
292+
t_arg = VALUE #( ( `navContainer` ) ( `main` ) ) ) ).
293+
ENDCASE.
294+
ENDMETHOD.
295+
296+
METHOD calculate_content_height.
297+
result = |{ condense( CONV i( floor( ( lines / 2 ) ) * 68 + 48 ) ) }px|.
298+
ENDMETHOD.
299+
ENDCLASS.

‎src/z2ui5_cl_demo_app_320.clas.xml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
3+
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
4+
<asx:values>
5+
<VSEOCLASS>
6+
<CLSNAME>Z2UI5_CL_DEMO_APP_320</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>Avatar Group</DESCRIPT>
9+
<STATE>1</STATE>
10+
<CLSCCINCL>X</CLSCCINCL>
11+
<FIXPT>X</FIXPT>
12+
<UNICODE>X</UNICODE>
13+
</VSEOCLASS>
14+
</asx:values>
15+
</asx:abap>
16+
</abapGit>

0 commit comments

Comments
 (0)