Part 28 of Advance SAPUI5: SAPUI5 Responsive Table – Contextual Width

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

Your Guide To Data Science Career 2024

Source link

  • Related Posts

    How to Add and Change PO Service Line using BAPI BAPI_PO_CHANGE?

    Administrations Tab in PO screen (ME23N) is one of the feared tabs by most ABAPers. At whatever point there is a prerequisite to add, erase or change the things of…

    How to Get Accurate Pricing in SD for Customer and Material?

    How to Get Accurate Pricing in SD for Customer and Material? At the start, you could feel for what reason is the need of this point. It is a particularly…

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You Missed

    How to Add and Change PO Service Line using BAPI BAPI_PO_CHANGE?

    • By Varad
    • April 19, 2025
    • 15 views
    How to Add and Change PO Service Line using BAPI BAPI_PO_CHANGE?

    How to Get Accurate Pricing in SD for Customer and Material?

    • By Varad
    • April 18, 2025
    • 37 views
    How to Get Accurate Pricing in SD for Customer and Material?

    How to update custom field of PRPS table

    • By Varad
    • April 17, 2025
    • 36 views
    How to update custom field of PRPS table

    BAPI_ALM_ORDER_MAINTAIN terminates with the runtime error MESSAGE_TYPE_X

    • By Varad
    • April 16, 2025
    • 47 views
    BAPI_ALM_ORDER_MAINTAIN terminates with the runtime error MESSAGE_TYPE_X

    Sales Office Data … Can you change it even if config does not allow?

    • By Varad
    • April 15, 2025
    • 38 views
    Sales Office Data … Can you change it even if config does not allow?

    PO re-price issue in BAPI_PO_CHANGE

    • By Varad
    • April 14, 2025
    • 47 views
    PO re-price issue in BAPI_PO_CHANGE