The action sheet technical component – available only in the new main mode – will allow you to create custom context based action lists.

Example

as1.PNG

an example of Action Sheet connected to a button.

Content

The action sheet gives in this case 3 options to execute. The available items can be defined in properties. Each item can have key, text and icon.property.

ac2.PNG

Position

It is bound to a button component, by this the position can be defined in relation to the assigned component.

In the component event you have to place this script (exampe on Button):


ACTION_SHEET_1.open(BUTTON_1);

Events

There is one event available, you can use it to react on the chosen action by the user. with scripting you can access the selected key or text and with IF statements you can execute corresponding function. The scripting is then as usual.

An example of Event implementation

ac3.PNG

Where to Find?

In the technical components you can see following components. Action Sheet is one of them. Pay attention that this one is available only in the new main mode.

ac4.PNG

Summary

In cases you have previously created such action lists on your own by placing panels and buttons / labels together – this component is a good improvement fro your application.

SCN Community Content

This component relates also to the SCN community package Action Sheet Button component – Action Sheet Button 2.0 – SCN Design Studio Community. There difference between those components is in the available scripts and other properties. You can chose the one which is better fitting for you.

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Moritz Kelm

    Hi Karol,

    is it correct to launch the Action Sheet from the Button’s “On Click” Event with the following script?

    ACTION_SHEET_1.open(me);

    The action sheet opens this way, but if it’s open and I decide not to click any of the options, I intuively click the button again to close the menu. However, on click the menu opens again (new open animation). Maybe it’d make sense to implement .setOpen() and .isOpen() functions, so a button click event like

    ACTION_SHEET_1.setOpen(!ACTION_SHEET_1.isOpen());

    would be possible.

    Cheers,

    Moritz

    (0) 
    1. Mustafa Bensan

      Hi Moritz,

      I would say it is correct to launch the Action Sheet from the “On Click” event of the button.  If you don’t make a selection, normally the Action Sheet should be dismissed by clicking anywhere outside the Action Sheet (except on the button).

      Regards,

      Mustafa.

      (0) 
      1. Moritz Kelm

        Hi Mustafa,

        This works just fine. 🙂 My post was just meant as a suggestion for further scripting functionality, as I expected the button to work differently when working with the application.

        Thanks for your input, best regards,

        Moritz

        (0) 
        1. Mustafa Bensan

          Hi Moritz,

          It’s interesting though that you’ve observed a new open animation of the Action Sheet when you click the button again without making a selection.  The standard UI5 behaviour is no new animation if the Action Sheet is already open, as per the UI5 Explored ActionSheet example.  Perhaps this behaviour is a quirk of the Design Studio implementation.

          Regards,

          Mustafa.

          (0) 
      2. varun garaga

        HI ,

        I have some Query on this component in on select you mentioned

        if(Action Sheet_1.getselectedvalue()== Action 1 ) .

        In above line of code Action 1 is the first item and action 2 is second item and so on..?

        Please correct me if i am Wrong

        And may i know what is the  purpose of component .how it varies from other components

        Thanks,

        Varun

        (0) 
  2. Emmo Karwowsky

    Good afternoon,
    I noticed (bug) incorrect behavior of Action Sheet Button component.
    To reproduce:
    1. Create new Design Studio application.
    2. Add Action Sheet Button component (configuration is not needed)
    3. Add Input Field (standard) component (configuration is not needed)
    4. Start application, click inside Input component, press Enter button on keyboard, then menu (of ASB) will appear (It shouldn’t be). I attach screenshot.

    Tested with stable version 3.0.0.201607151206. (Design Studio 1.6 SP2, local mode)

    I have been added issue on GitHub.

    (0) 

Leave a Reply