Content Type: Widget
Categories: Utility


Bring the old skool and still highly addictive arcade game into your Mendix app. Nice for your company or as an easter egg in a client's app :). Already a pro, try to beat Victor's score on: http://tetris100-sandbox.mxapps.io (without using space / pausing too much).


Demo urlhttps://tetris100-sandbox.mxapps.io


  • Create a ‘Game’ entity with the following attributes:
    • ‘Player Name’ (String)
    • ‘Score’ (Integer)
    • ‘Rows’ (Integer)
    • ’Level’ (Integer)
    • ‘GameLog’ (String (unlimited))
  • Also tick the ‘System Members’ to store the system members:
    • ‘createdDate’;
    • ‘owner’
  • Associate the ‘Game’ entity to the ‘System.Session’ entity. Cardinality is * Game – 1 Session
  • Create a homepage
  • Create a dataview on the homepage with the ‘Game’ entity as caller of the page;
  • Choose as source for the DataView ‘Microflow’ and create a datasource microflow, that creates a new ‘Game’ entity, associate it to the session ($currentSession) and gives it back as output.
  • Download the ‘Tetris widget’ from the AppStore and place it in the ‘Game’ DataView
  • Now start solving all errors the widget gives in Studio Pro / Mendix Modeler:
  • In the ‘Behavior’ tab of the widget, add a ‘Save Microflow’, called something like ‘BCo_Game_Save’ that has the ‘Game’ entity as it’s input parameter and commits the ‘Game’ entity to the database.
    • Ideally, also add this microflow as the before commit event handler. In this way you can always check for valid scores if a user commits the ‘Game’ entity from a JavaScript hack;
  • In the ‘Data Source’ tab of the widget select the ‘Game’ entity as ‘Object Entity’. Select the correct attributes to match the fields:
    • ‘Player Name’ (String)
    • ‘Score’, ‘Rows’,’Level’ (Integer)
    • ‘GameLog’ (String (unlimited))
  • In the tabs ‘Appearance’ and ‘Styling’ choose your own texts + styling to customize the Tetris game to your needs.
  • For the high scores overview, add a layout grid (6 / 6) and add the dataview with the widget in the left part. Add a datagrid with all ‘Game’ objects, sorted by the ‘Score’ attribute descending in the right part of the layout grid. Remove the ‘New’, ‘Edit’ and ‘Delete’ buttons from the grid.
  • Setup the security as you like. Preferred is to add for normal users an XPath constraint on write rights on the ‘Game’ entity ([System.owner='[%CurrentUser%]']), to make sure a user can only (via the Tetris game widget). See also print screens attached in the AppStore.


Version: 1.0.0
Framework Version: 7.22.2
Release Notes: - Multiple styling options, like coloring per block, opacity over all blocks. - Adjust start speed, maximum speed and speed increment per row removed. - For analysis purposes a game log per row removed is kept track of.