MDK SAP - Styling Dinamically / Variables

[KikoCarrasco]

Hello SAP people!

I have already asked a question and they answered it yesterday, which has helped me a lot to continue. I am learning MDK and I would like to understand one thing that I am not very clear about variables... On the main page I have a list of charges from a client that I previously select, which do not have any style applied. My application works in offline mode, so if there is no Internet connection when I try to send the request to SAP to collect the selected charges, these selected charges have to appear in a different color, that is: it has to be updated automatically after the connection error. I am not being able to do it. Please anyone can help me a little bit?

I attach a piece of code:

Collections.page:

{
"Controls": [
{
"FilterFeedbackBar": {
"ShowAllFilters": false,
"_Type": "Control.Type.FilterFeedbackBar"
},
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable0",
"Sections": [
{

"Controls": [

{
"_Type": "Control.Type.FormCell.Button",
"_Name": "FormCellButton0",
"IsVisible": true,
"Separator": true,
"Title": "$(L,'collect')",
"TextAlignment": "Center",
"ButtonType": "{ButtonType/Text}",
"Enabled": true,
"OnPress": "/CollectionsApp/Rules/Collections/OnPressCollect.js"
}

]

},

{
"Separators": {
"TopSectionSeparator": false,
"BottomSectionSeparator": true,
"HeaderSeparator": true,
"FooterSeparator": true,
"ControlSeparator": true
},
"_Type": "Section.Type.ObjectTable",
"Target": "/CollectionsApp/Rules/Collections/GetCustomerUnpaidDocs.js",
"_Name": "SectionObjectTable0",
"Visible": true,
"EmptySection": {
"FooterVisible": false
},
"ObjectCell": {
"ContextMenu": {
"Items": [],
"LeadingItems": [],
"PerformFirstActionWithFullSwipe": true,
"TrailingItems": []
},
"Title": "{KunnrName1} ({Kunnr})",
"Subhead": "$(L,'rep'): {Salesrep} ({Compcode}) $(L,'payer'): {Filkd}",
"Description": "$(L,'inv_n'): {Invoice} $(L,'inv_f') $(D,{Bldat},'','',{format:'short'}) $(L,'doc'): {Docnumber}/{Buzei} {Year}",
"StatusText": "$(C,{Dueamount}, {Waers} )",
"SubstatusText": "$(L,'due'): $(D,{Duedate})",
"PreserveIconStackSpacing": false,
"AccessoryType": "Checkmark",
"Styles": {
"Title": "/CollectionsApp/Rules/Collections/SetStyle.js",
"Subhead": "/CollectionsApp/Rules/Collections/SetStyle.js",
"Description": "/CollectionsApp/Rules/Collections/SetStyle.js",
"StatusText": "/CollectionsApp/Rules/Collections/SetStyle.js",
"SubstatusText": "/CollectionsApp/Rules/Collections/SetStyle.js"
},
"Selected": false
},
"HighlightSelectedItem": true,
"Selection": {
"ExitOnLastDeselect": false,
"LongPressToEnable": "None",
"Mode": "Multiple"
},
"OnSelectionChanged": "/CollectionsApp/Rules/Collections/OnSelectionChanged.js"
}

]

}

OnSelectionChanged.js:

There is this line that saves an array of those selected collections and their data: 

CommonLibrary.setStateVariable(context, 'SelectedBindingCollections', selectedBindingCollections, 'Collections');

And obviously, in SetStyle.js inside the ObjectCell are the conditions with the .less that I want to apply when is 'PendingOperation', that is in the level of the 'Compcode', 'Doctype',.. etc etc, basically the normal client data.

Well this is all and I don't know if I explained well to understand... thanks!! 😄

[bill_froelich · Accepted solution]

I'm not sure I understand what you are wanting to accomplish. Are you using the Object Table in multi-select mode to pick from the list the items you want to process in the backend?  Once you pick them what happens?  In an offline app you would normally update those entities locally and when you have a connection sync to the backend but it depends on your app / backend / requirements of course.

Your rules for the styles just need to return the name of the style class from the .less file you want applied to the cell.  Your rule can use whatever logic you need to determine if the cell should be styled or not.

[KikoCarrasco · Accepted solution]

What I mean is that I want to change the state of a variable, in this case ‘PendingOperation’ to false, because what I want to do is to update the style of the title and other texts, but I can't get the style to be executed again. I've been looking around and there is a .redraw() but it doesn't work because it goes to the initial state (I think) and the style change is not reflected. I'm used to working in React and Angular and components communicate with each other by using variables in a service, observables or parameters of this style.So I'm looking for something similar: that the styles.js learns about the changes and returns the appropriate .less class.

Editing: to answer your question at the beginning, yes; it is basically a list of multi options with the checkboxes so that I can then click on a 'Collect' button and the action is sent to SAP to collect these unpaid amounts. This works when there is an internet connection, but when there is not, I want to do what I explained above. I can share more code if you need (or images / video to show the process that I want)