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

    Tool for GOS attachment from one SAP system to another SAP system

    Your Association (say Shy, which is in SAP) obtained another organization (say XYZ, which is additionally in SAP). According to plan, field-tested strategy to stack all information and cycle from…

    Sample program to attach any file from application server to any Business Object

    Let’s get started on Sample program to attach any file from application server to any Business Object. * Sample program to attach documents to any business objectREPORT z_gos_attachment NO STANDARD…

    Leave a Reply

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

    You Missed

    Tool for GOS attachment from one SAP system to another SAP system

    • By Varad
    • May 29, 2025
    • 17 views
    Tool for GOS attachment from one SAP system to another SAP system

    Sample program to attach any file from application server to any Business Object

    • By Varad
    • May 28, 2025
    • 20 views
    Sample program to attach any file from application server to any Business Object

    Table to check whether a business object has any GOS attachment or not

    • By Varad
    • May 27, 2025
    • 56 views
    Table to check whether a business object has any GOS attachment or not

    SAP Cloud Platform Integration (CPI) Part 23 – Step-by-Step Guide to Mail Adapter Configuration with Attachments

    • By Varad
    • May 26, 2025
    • 39 views
    SAP Cloud Platform Integration (CPI) Part 23 – Step-by-Step Guide to Mail Adapter Configuration with Attachments

    How to Send Custom Purchase Order Form Directly to the Vendor?

    • By Varad
    • May 25, 2025
    • 88 views
    How to Send Custom Purchase Order Form Directly to the Vendor?

    Object Oriented Way of Sending an email with PDF as an Attachment

    • By Varad
    • May 24, 2025
    • 71 views
    Object Oriented Way of Sending an email with PDF as an Attachment