Skip to Content
In both CRM and C4C it is allowed to adapt table column width by end user. This blog explains how the personalization works under the hood.

How Table column resize works in CRM

Click personalize button in table toolbar:
Specify the percentage of each column width and save the change.
Then check the personalization persistence table BSPC_DL_PERSSTOR, query with my user and changed_at = today:
One entry found, the personalization of each column width is stored as xml:
When next time the table is to be rendered, this personalization setting is read again from persistence table and used for rendering:

How Table column resize works in Cloud for Customer

In C4C it is very convenient to finish table column size adaptation by simple drag and drop:
Once this is done, you can observe a HTTP request sent to backend:
It is impossible to directly review what exactly has been sent in the network tab of Chrome development tool as the content displayed there has been gzipped.
In fact the new column width is sent to ABAP backend via this HTTP request.
Instead, set a breakpoint in file FunctionModule.js:
Inspect the content in variable sRequestString, and the detail content sent is contained in field CONTENT, which is encoded by BASE64:
PD94bWwgdmVyc2lvbj0nMS4wJz8+PENoYW5nZVRyYW5zYWN0aW9uIHhtbG5zOmJhc2U9J2h0dHA6Ly93d3cuc2FwLmNvbS9hMXMvY2Qvb2Jlcm9uL2Jhc2UtMS4wJyAgeG1sbnM6dXhjPSdodHRwOi8vd3d3LnNhcC5jb20vYTFzL2NkL29iZXJvbi91eGNvbnRyb2xsZXItMS4wJyB4bWxuczp1eHY9J2h0dHA6Ly93d3cuc2FwLmNvbS9hMXMvY2Qvb2Jlcm9uL3V4dmlldy0xLjAnIHhtbG5zPSdodHRwOi8vd3d3LnNhcC5jb20vYTFzL2NkL29iZXJvbi91aW1vZGVsY2hhbmdlLTEuMCcgaWQ9J2NiNDc3MWY4NjFiNjU5ODAyMDQ1OTc1YjI5YzFiNjZkJyB4cmVwUGF0aD0nL1NBUF9CWURfVUlfRkxFWC9DSEFOR0VfVFJBTlNBQ1RJT05TL0VuZFVzZXIvQ2hhbmdlQ29sdW1uV2lkdGgvY2I0NzcxZjg2MWI2NTk4MDIwNDU5NzViMjljMWI2NmQudWljaGFuZ2UnIHR5cGU9J0NoYW5nZUNvbHVtbldpZHRoJyB1c2VyPSdLOTEyM1oyQTBBVicgY2xpZW50VHlwZT0naHRtbDUnIHVzZXJUeXBlPSdFbmRVc2VyJyBlbWJlZGRpbmdDb250ZXh0PScnPjxVc2VkQW5jaG9yIHR5cGU9J0xpc3RBbmNob3InIHhyZXBQYXRoPScvU0FQX0JZRF9VSV9GTEVYL1NUQUJMRV9BTkNIT1JTLzQ3ZTI0NzViOGMxYTRjOGViYjEwM2Q2NjIxMmE0ZWVhLnVpYW5jaG9yJz48VGFyZ2V0RmlsZSB4cmVwUGF0aD0nL1NBUF9CWURfQVBQTElDQVRJT05fVUkvQkNUb29scy9Xb3JrQ2VudHJlL092ZXJ2aWV3X09XTC5PV0wudWljb21wb25lbnQnLz48Q2hhbmdlQ29sdW1uV2lkdGggbmV3TGVuZ3RoPSIyNjdweCIgY29sdW1uTW9kZWxJZD0idzRIRlgwNWZrYWdpMVN3cTN0ZG1UVyIvPjwvVXNlZEFuY2hvcj48L0NoYW5nZVRyYW5zYWN0aW9uPg==

You can paste the encoded string into website https://www.base64decode.org/

and get decoded string there:
<?xml version='1.0'?><ChangeTransaction xmlns:base='http://www.sap.com/a1s/cd/oberon/base-1.0'  xmlns:uxc='http://www.sap.com/a1s/cd/oberon/uxcontroller-1.0' xmlns:uxv='http://www.sap.com/a1s/cd/oberon/uxview-1.0' xmlns='http://www.sap.com/a1s/cd/oberon/uimodelchange-1.0' id='cb4771f861b659802045975b29c1b66d' xrepPath='/SAP_BYD_UI_FLEX/CHANGE_TRANSACTIONS/EndUser/ChangeColumnWidth/cb4771f861b659802045975b29c1b66d.uichange' type='ChangeColumnWidth' user='K9123Z2A0AV' clientType='html5' userType='EndUser' embeddingContext=''><UsedAnchor type='ListAnchor' xrepPath='/SAP_BYD_UI_FLEX/STABLE_ANCHORS/47e2475b8c1a4c8ebb103d66212a4eea.uianchor'><TargetFile xrepPath='/SAP_BYD_APPLICATION_UI/BCTools/WorkCentre/Overview_OWL.OWL.uicomponent'/><ChangeColumnWidth newLength="267px" columnModelId="w4HFX05fkagi1Swq3tdmTW"/></UsedAnchor></ChangeTransaction>
From this xml we can know that the adaptation of table column width is persisted to ABAP backend via change transaction.
When next time the UI page contains this table is rendered,
the UI source code returned by ABAP backend has already been merged with the content of width adaptation change transaction, which means the new column width is available there:
Then TableRender.js uses this new width to render table column:
And after rendering the new width takes effect now.
To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply