Skip to main content

 

 

 

 
Language:
 
Applies only to Mobile Apps and Reactive Web Apps
Service Studio version:
 
 
OutSystems

Mouse Events

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • You can use the Mouse Events UI Pattern when the user needs to select elements on the interface with high precision.

    How to Use the Mouse Events UI Pattern

    The following example shows how you can use the Mouse Events UI pattern to display the distance the mouse is dragged left and right across the screen.

    1. In Service Studio, in the Toolbox, search for Mouse Events.

      The Mouse Events widget is displayed.

      If the UI widget does not display, it may be because you used a ready-made app, which deletes unused widgets from the module. To make additional widgets available in your app:

      a. Go to Module > Manage dependencies.

      b. Search for and select the relevant Producer, for example OutSystemsUI. Ensure Show All is selected.

      c. On the Public elements for the selected Producer displayed on the right, ensure Show All is selected.

      d. Search for and select the element you want to add, and click Apply.

      e. In Service Studio, in the Toolbox, search for the widget again.

    2. From the Toolbox, drag the Mouse Events widget into the Main Content area of your application's screen.

    3. From the Toolbox, drag the Center Content widget into the Main Content area of your screen.

    4. On the Properties tab, enter a name in the Name property. In this example, we enter card.

    5. Add 2 local variables by right-clicking on your screen name and selecting Add Local Variable.

      In this example we call name them Drag and Distance. Both local variables are of data type text.

    6. Add the relevant content to the Center Content widget placeholders.

    In this example, we add text and 2 expressions to the Center placeholder, and text to the Bottom placeholder.

    Each of the expressions are set to the local variables respectively (Drag and Distance).

    1. Add a client action by right-clicking your screen name and selecting Add Client Action.

    2. Enter a name for the client action. In this example, we enter MouseEventsMove.

    1. Add 2 input parameters by right-clicking the client action and selecting Add Input Parameter.

      In this example, we add the OffsetX and OffsetY input parameters and set their data type to decimal.

    2. Add the relevant logic to the client action. In this example, we add the following:

    3. Select the Mouse Events widget and set the WidgetId, PreventDefaults, and the Handler properties.

      In this example, the WidgetId is set to card.Id, the PreventDefaults to False, OfFsetX to OffsetX, and OffsetY to OffsetY.

    After following these steps and publishing the module, you can test the pattern in your app.

    Properties

    Property Description
    WidgetId (Text): Mandatory The element that responds to the mouse event you configure.
    PreventDefaults (Boolean): Optional If True, events propagation to the screen and other widgets is stopped. This is the default. If False, event propagation to the screen and other widgets is enabled.
    • Was this article helpful?