CRM and CX Blogs by SAP
Stay up-to-date on the latest developments and product news about intelligent customer experience and CRM technologies through blog posts from SAP experts.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

How Table column resize works in CRM and Cloud for Customer

JerryWang
Product and Topic Expert
Product and Topic Expert
‎2017 Nov 21 6:21 AM
0 Kudos
2,298

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.


















Popular Blog Posts