K2BTools Tutorial - Exercise 4.3: Responsive Sizes property

Before continuing, go to the “Customer” transaction WorkWith, and go to the EntityManager of one of the customers shown. Try resizing the browser’s window. As you can see, the content itself does not change, but its layout does: For example, labels appear above their corresponding fields, and fields that used to appear in the same line now use two separate lines (as First Name and Last Name in the examples).

To customize this behaviour, the developer may use “Responsive Sizes” properties. See how to use those properties below.

  1. Go to the K2BTrnForm instance that corresponds to the “Customer” transaction.
  2. We will customize the behaviour for this screen, hiding the “Occupation” line separator when the screen is “Extra Small”. To do this, go to the Responsive Sizes Editor as shown in the following image.
    ResponsiveSizesPropertyChange
    Responsive Sizes property

  3. In the “Size” combo, select “Extra Small”.
  4. Select the “Occupation” Component.
  5. Set the “Visible” property to “False”.
  6. Save, generate, and execute your app.
  7. Experiment with the window size and see how the “Occupation” Line Separator is hidden in the Extra Small size.

Responsive Sizes properties can be used to change attributes layouts also. Follow the following steps to do so:

  1. Locate the “Address” group inside the K2BTrnForm instance for Customer.
  2. Open the Responsive Sizes property editor.
    ResponsiveSizesPropertyChange2
    Responsive Sizes property

  3. We will now improve the visualization in “Small” screens. In this size, the space allocated to the group is not enough to show all three attributes in the same line.
  4. Select “Small” in the Size combo, and set the “Width” property for all three attributes to “100%”.
  5. When working with Responsive Sizes properties, the default values for the “Large” size are taken from the “Medium” size, which in turn are taken from the “Small” size. Because of this, when the “Width” properties were altered in the previous step in the “Small” size, they were altered in the “Medium” and “Large” sizes too.
  6. To solve this, we must now change the “Medium” Size definition. Select “Medium” in the Size combo, and set the “Width” property for all three attributes back to “33%”.
  7. Save, generate, and execute your app.
  8. Experiment with the window size, and see how the attributes are distributed in each case.

Tip: When using Columns nodes, Responsive Sizes properties can be used to allocate screen space to each column, or even to display one column below the other in smaller sizes. Try it out!