Varad
One of the most popular aspects of a responsive table is its automatic contextual width. Automatic contextual width refers to the way columns change from covert to popin content and vice versa depending on the amount of screen real estate. Automatic contextual width therefore kicks in and squeezes the columns into a popin saving space on the screen in circumstances when the user is allowed to utilize a slider to compress and expand content space. I’ll use an example to illustrate this in this blog article.
We must work with the responsive table’s characteristics shown below in order to implement the automatic contextual width functionality of a table.
- popinLayout
- contextual Length
- And the responsive column’s characteristics below
- screen width in minutes
- madPopin
Table Characteristics
popinLayout
We can specify the layout in which the table popin rows are shown by using the popinLayout attribute. It accepts Block, GridLarge, and GridSmall as its three possible options.
contextual Length
We can specify the width of the container in which the table is placed by setting this attribute. The table can now modify the popin behavior as a result. Usually, we have Auto selected.
Column characteristics
screen width in minutes
- This attribute is implemented for every column within the table. It instructs the table to display or conceal the column according to the width of the screen. For instance, the column would be hidden if this attribute was set to “Tablet” and the application was subsequently used on a phone. However, the column would show up if you used a tablet to run the application and a desktop or laptop screen that was larger than a tablet. Usually, demandPopin is used in conjunction with this attribute.
demand, Putin
- The minScreenWidth parameter’s “column hiding” effect becomes “showing in a popin” if this property is set to true. This indicates that the content of the column is displayed in a table popin format rather than being hidden.
Examine Coding
- I’ve added a slider to the screen to show how responsive table columns behave when content becomes squeezed. A responsive table is located on the left side of the slider, and a short text has been added to the right side. Table data is first shown in columns with the slider in the center. At first glance, it appears like below.
The content of the columns is squeezed into a popin whenever the slider is dragged to the left, as seen below.
In order to attain the behavior that has been shown, these attributes have been set.
At the table level
At the Column level
Splitter that Responds
Additionally, we updated the view with a responsive splitter. The code is displayed below.
I hope you enjoyed the walkthrough and the explanation of the tutorial. Kindly provide your thoughts and remarks in the space provided for comments.
YOU MAY BE INTERESTED IN
10 Real-World SAP ABAP Programming Examples (with Code!)
Your Definitive Guide to Becoming a SAP ABAP Developer
