RAP Actions inside dropdown

[vicky_p]

Hi,

I wanted to add actions from Behavior Definition inside different drop down menus (Refer image)

I want to group these actions inside (example) three separate drop downs (Refer preferred output)

my current code:

Behavior Definition:

  action ( features : instance ) a1 result [1] $self;
  action ( features : instance ) a2 result [1] $self;
  action ( features : instance ) a3 result [1] $self;

  action ( features : instance ) b1 result [1] $self;
  action ( features : instance ) b2 result [1] $self;
  action ( features : instance ) b3 result [1] $self;

  action ( features : instance ) c1 result [1] $self;
  action ( features : instance ) c2 result [1] $self;
  action ( features : instance ) c3 result [1] $self;

Behavior Projection:

  use action a1;
  use action a2;
  use action a3;

  use action b1;
  use action b2;
  use action b3;

  use action c1;
  use action c2;
  use action c3;

Metadata:

  @UI: {  lineItem:       [ { position: 90 },
                            { type: #FOR_ACTION, dataAction: 'a1', label: 'A1' },
                            { type: #FOR_ACTION, dataAction: 'a2', label: 'A2' },
                            { type: #FOR_ACTION, dataAction: 'a3', label: 'A3' },

                            { type: #FOR_ACTION, dataAction: 'b1', label: 'B1' },
                            { type: #FOR_ACTION, dataAction: 'b2', label: 'B2' },
                            { type: #FOR_ACTION, dataAction: 'b3', label: 'B3' },

                            { type: #FOR_ACTION, dataAction: 'c1', label: 'C1' },
                            { type: #FOR_ACTION, dataAction: 'c2', label: 'C2' },
                            { type: #FOR_ACTION, dataAction: 'c3', label: 'C3' }
                          ],
          identification: [ { position: 90 },
                            { type: #FOR_ACTION, dataAction: 'a1', label: 'A1' },
                            { type: #FOR_ACTION, dataAction: 'a2', label: 'A2' },
                            { type: #FOR_ACTION, dataAction: 'a3', label: 'A3' },

                            { type: #FOR_ACTION, dataAction: 'b1', label: 'B1' },
                            { type: #FOR_ACTION, dataAction: 'b2', label: 'B2' },
                            { type: #FOR_ACTION, dataAction: 'b3', label: 'B3' },

                            { type: #FOR_ACTION, dataAction: 'c1', label: 'C1' },
                            { type: #FOR_ACTION, dataAction: 'c2', label: 'C2' },
                            { type: #FOR_ACTION, dataAction: 'c3', label: 'C3' }
                          ] }

Please suggest how to do this.

Regards.

[Marian_Zeis]

do you have any documentation that this is possible at all?

[Ramjee_korada]

Hi Vicky,

As per understanding, the custom logic to be written fiori extension points.

Best wishes,

Ramjee Korada

[vicky_p]

Hi Marian and Ramjee,

I saw a video by SAP: SAP Developers - Guidance for developing RAP applications in ABAP

here SAP Developers commented (please refer comment section of the video also): "In a Fiori UI those come because of Annotations and the BDef itself. No UI5 coding necessary."

Also seems like (from video) this functionality is already added by SAP for BP (please refer to Actions section of the video). I tried to look into the objects mentioned in the video but couldn't find anything other than that we have to give actions with parameters and inside the parameter we have to annotate value help, but i may be wrong as when i gave this in my program it opened up a dialog popup with input parameters from the parameter i gave for the action.

sorry if the explanation i gave is not clear you can refer the video from 35:00 - 40:00

[vicky_p]

Scenario implemented by SAP for BP: SAP Developers - YouTube Video Demo

[Marian_Zeis · Accepted solution]

Have a look here in the documentation:
https://ui5.sap.com/#/topic/cbf16c599f2d4b8796e3702f7d4aae6c.html

under the point "Grouping Actions as Menu Buttons":

it seems it´s only possible in the manifest:

"SalesOrderManageObjectPage": {
    "type": "Component",
    "id": "SalesOrderManageObjectPage",
    "name": "sap.fe.templates.ObjectPage",
    "options": {
        "settings": {
           "content": {
              "header": {
                "actions": {
                    "myFirstAction": {
                        "press": "SalesOrder.custom.CustomActions.message",
                        "text": "My First Action"
                    },
                    "mySecondAction": {
                        "press": "SalesOrder.custom.CustomActions.message",
                        "text": "My Second Action"
                    },
                    "MenuActions": {
                        "text": "My Menu Button",
                        "menu": [
                            "myFirstAction",
                            "mySecondAction",
                            "DataFieldForAction::com.c_salesordermanage_sd.BoundActionWithParams"
                            ]
                        }
                    }
                }
            }
        }
    }
}

[former_member124665 · Accepted solution]

Hello vicky_p,

can you mark answer of Marian Zeis as Best Answer(for othercommunity member) ? Since this is answer for our question.

Thank you

[former_member124665]

Hello vicky_p,

by using Fiori Elements template "List Report" you cannot achieve what you like to, since every action is represented by separate button.

If you like to have "dropdown" buttons, you must use SAP UI5 Freestyle app. There you use smart filter bar and smart table controls.

Then you can customize smart table with custom toolbar

https://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sampl...

and insert "menu button" into toolbar

https://sapui5.hana.ondemand.com/#/entity/sap.m.MenuButton/sample/sap.m.sample.MenuButton

On each button event then you can invoke RAP action, depends on ODATA version

ODATA V2: https://sapui5.hana.ondemand.com/sdk/#/api/sap.suite.ui.generic.template.ListReport.extensionAPI.Ext...

ODATA V4: https://sapui5.hana.ondemand.com/sdk/#/api/sap.fe.core.controllerextensions.EditFlow%23methods/invok...

But i think it is lot of custom coding

Br,

[vicky_p]

Hi Marek thanks for your response,

But i think this can be achieved from backend aswell by annotations on behavior projection. I will still consider your feedback.

Example done by SAP: SAP Developers - Guidance for developing RAP applications in ABAP

(Start from 42:10, Also see comment section of the video, SAP Responded it can be done via annotations for Bdef)

Thanks for your inputs 🙂

[former_member124665]

I see now and i´m curious as well 🙂 what about ask Andre himself.

Hello andre.fischer,

thanks for perfect guidance video into RAP. Me and vicky_p(maybe others aswell) wonder, how we can achieve dropdown button(as create button in video) using cds UI annotations and actions in BD of root entity.

I tried below annotations, but has no success, buttons are separated. Thank you.

@UI.lineItem: [{ position: 10, type: #FOR_ACTION, label: 'test_x', dataAction: 'test_x' },
               { position: 10, type: #FOR_ACTION, label: 'test_y', dataAction: 'test_y' },
               { position: 10, type: #FOR_ACTION, label: 'test_z', dataAction: 'test_z' }]

projection;

define behavior for ZMLBK_C_BOOKSHOP alias BOOKSHOP
{
  use create;
  use update;
  use delete;

  use action test as test_x;
  use action test2 as test_y;
  use action test3 as test_z;

  use association _EMPLOYEE { create; }

}

[sergiomanuel_arce]

You can do this direcly with annotation:

@𝗨𝗜: {
 𝗹𝗶𝗻𝗲𝗜𝘁𝗲𝗺: [
 { 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: 𝟭𝟬, 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝗰𝗲: hashtag#𝗛𝗜𝗚𝗛 },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡_𝗚𝗥𝗢𝗨𝗣, 𝗹𝗮𝗯𝗲𝗹: '𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝗮𝘁𝘂𝘀', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗮𝗰𝗰𝗲𝗽𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗔𝗰𝗰𝗲𝗽𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗿𝗲𝗷𝗲𝗰𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗥𝗲𝗷𝗲𝗰𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }
 ],
 𝗶𝗱𝗲𝗻𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻: [
 { 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: 𝟭𝟬, 𝗹𝗮𝗯𝗲𝗹: '𝗧𝗿𝗮𝘃𝗲𝗹 𝗜𝗗' },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡_𝗚𝗥𝗢𝗨𝗣, 𝗹𝗮𝗯𝗲𝗹: '𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝗮𝘁𝘂𝘀', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗮𝗰𝗰𝗲𝗽𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗔𝗰𝗰𝗲𝗽𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' },
 { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗿𝗲𝗷𝗲𝗰𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗥𝗲𝗷𝗲𝗰𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }
 ]

I found the solution in a linkedin post: https://www.linkedin.com/posts/bharathi-sakthivel_foractiongroup-high-foractiongroup-activity-733853...

[ankahit]

were you able to achieve through annotations?

[sergiomanuel_arce]

hello, its possible with this anotations: @𝗨𝗜: { 𝗹𝗶𝗻𝗲𝗜𝘁𝗲𝗺: [ { 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: 𝟭𝟬, 𝗶𝗺𝗽𝗼𝗿𝘁𝗮𝗻𝗰𝗲: hashtag#𝗛𝗜𝗚𝗛 }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡_𝗚𝗥𝗢𝗨𝗣, 𝗹𝗮𝗯𝗲𝗹: '𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝗮𝘁𝘂𝘀', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗮𝗰𝗰𝗲𝗽𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗔𝗰𝗰𝗲𝗽𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗿𝗲𝗷𝗲𝗰𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗥𝗲𝗷𝗲𝗰𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' } ], 𝗶𝗱𝗲𝗻𝘁𝗶𝗳𝗶𝗰𝗮𝘁𝗶𝗼𝗻: [ { 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: 𝟭𝟬, 𝗹𝗮𝗯𝗲𝗹: '𝗧𝗿𝗮𝘃𝗲𝗹 𝗜𝗗' }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡_𝗚𝗥𝗢𝗨𝗣, 𝗹𝗮𝗯𝗲𝗹: '𝗖𝗵𝗮𝗻𝗴𝗲 𝗦𝘁𝗮𝘁𝘂𝘀', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗮𝗰𝗰𝗲𝗽𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗔𝗰𝗰𝗲𝗽𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' }, { 𝘁𝘆𝗽𝗲: hashtag#𝗙𝗢𝗥_𝗔𝗖𝗧𝗜𝗢𝗡, 𝗱𝗮𝘁𝗮𝗔𝗰𝘁𝗶𝗼𝗻: '𝗿𝗲𝗷𝗲𝗰𝘁𝗧𝗿𝗮𝘃𝗲𝗹', 𝗹𝗮𝗯𝗲𝗹: '𝗥𝗲𝗷𝗲𝗰𝘁 𝗧𝗿𝗮𝘃𝗲𝗹', 𝗮𝗰𝘁𝗶𝗼𝗻𝗚𝗿𝗼𝘂𝗽𝗜𝗱: '𝗺𝗲𝗻𝘂-𝗖𝗵𝗮𝗻𝗴𝗲𝗦𝘁𝗮𝘁𝘂𝘀' } ], i read in https://www.linkedin.com/posts/bharathi-sakthivel_foractiongroup-high-foractiongroup-activity-733853...