How to set `fieldGroupIds` on sap.uxap.BlockBase containing controls? - sapui5

Question

Assume I have a SAPUI5 application like this sample application.
As it can be seen in the code of this application, the views are somehow split into several blocks and attached to main view like this:
<ObjectPageSubSection title="Payment information">
<blocks>
<personal:PersonalBlockPart1 id="part1"/>
</blocks>
<moreBlocks>
<personal:PersonalBlockPart2 id="part2"/>
</moreBlocks>
</ObjectPageSubSection>
And the PersonalBlockPart1 has been split into two files like this:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns:forms="sap.ui.layout.form" xmlns="sap.m">
<forms:SimpleForm editable="false" layout="ColumnLayout">
<core:Title text="Main Payment Method"/>
<Label text="Bank Transfer"/>
<Text text="Sparkasse Heimfeld, Germany"/>
</forms:SimpleForm>
</mvc:View>
sap.ui.define(['sap/uxap/BlockBase'], function (BlockBase) {
"use strict";
var BlockJobInfoPart1 = BlockBase.extend("sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1", {
metadata: {
views: {
Collapsed: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
},
Expanded: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
}
}
}
});
return BlockJobInfoPart1;
});
If I want to set fieldGroupIds a direct way is to do it in xml fragment of the code! for example:
<Text text="Sparkasse Heimfeld, Germany" fieldGroupIds="XYZ1"/>
My question is how can I do it in the parent view, something like this:
<blocks>
<personal:PersonalBlockPart1 id="part1" fieldGroupIds="XYZ1"/>
</blocks>
<moreBlocks>
<personal:PersonalBlockPart2 id="part2" fieldGroupIds="XYZ2"/>
</moreBlocks>
I tried it, and obviously it does not apply to children controls. However, I think there could be a solution that read this property from main XML view and apply it in the JS file on all the enclosing controls, something like this:
sap.ui.define(['sap/uxap/BlockBase'], function (BlockBase) {
"use strict";
var BlockJobInfoPart1 = BlockBase.extend("sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1", {
metadata: {
views: {
Collapsed: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
},
Expanded: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
}
}
},
onViewInit: function(){
// pseudocode
var sFieldGroupIds = this.getFieldGroupIds();
var aControls = this.getAllFeidls();
iterate over aControls and set the sFieldGroupId
}
});
return BlockJobInfoPart1;
});

Answer 1

I must use the onBeforeRendering function:
sap.ui.define(['sap/uxap/BlockBase'], function (BlockBase) {
"use strict";
var setFieldGroupIdsRecursively = function (oControl, sFieldGroupIds) {
var aPossibleAggregations = ["items", "content", "form", "formContainers", "formElements", "fields", "cells"];
if (oControl instanceof sap.m.InputBase || oControl instanceof sap.ui.comp.smartfield.SmartField) {
oControl.setFieldGroupIds(sFieldGroupIds);
return;
}
for (var i = 0; i < aPossibleAggregations.length; i += 1) {
var aControlAggregation = oControl.getAggregation(aPossibleAggregations[i]);
if (aControlAggregation) {
// generally, aggregations are of type Array
if (aControlAggregation instanceof Array) {
for (var j = 0; j < aControlAggregation.length; j += 1) {
setFieldGroupIdsRecursively(aControlAggregation[j], sFieldGroupIds);
}
}
else { // ...however, with sap.ui.layout.form.Form, it is a single object *sigh*
setFieldGroupIdsRecursively(aControlAggregation, sFieldGroupIds);
}
}
}
};
var BlockJobInfoPart1 = BlockBase.extend("sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1", {
metadata: {
views: {
Collapsed: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
},
Expanded: {
viewName: "sap.uxap.sample.SharedBlocks.employment.BlockJobInfoPart1",
type: "XML"
}
}
},
onBeforeRendering: function () {
var aFieldGroupIds = this.getFieldGroupIds(),
sFieldGroupIds = "";
if (aFieldGroupIds.length > 0) {
sFieldGroupIds = aFieldGroupIds.join();
var oView = sap.ui.getCore().byId(this.getSelectedView());
if (oView) {
var aContent = oView.getContent();
for (var j = 0; j < aContent.length; j++) {
setFieldGroupIdsRecursively(aContent[j], sFieldGroupIds);
}
}
}
}
});
return BlockJobInfoPart1;
});