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 “Shipping Address” line separator when the screen is “Extra Small”. To do this, go to the Responsive Sizes Editor of the second column as shown in the following image.
    ResponsiveSizesPropertyChang
    Responsive Sizes property

  3. In the “Size” combo, select “Extra Small”.
  4. Select the “Shipping Address” 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 “Shipping Address” 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 first column that contains the “Personal Information” of the Customer.
  2. Open the Responsive Sizes property editor.
  3. We will now improve the visualization in “Small” screens. In this size, the space allocated for "CustomerPrefix", "CustomerMaritialStatus" and "CustomerSex" is not enough for all of them
  4. Select “Small” in the Size combo, and set the “Width” property to the three attibutes to “100%”.
    ResponsiveSizesPropertyChange8
    Responsive Sizes property

  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 attributes to “50%”.
  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!