A dialog is opened in a special part of the DOM called the static area. Thus, it is not part of the view through which it is opened. As a result, the content density CSS class set for the view is not automatically forwarded to the dialog. The corresponding style class of the view must therefore be passed to the dialog manually.
sap/ui/core/syncStyleClass function can be used to do this, as shown in the figure Forwarding the Content Density to a Dialog.
In the figure, the
sap/ui/core/syncStyleClass function has been added to the dependency array of the corresponding view controller and the factory function has been extended by the parameter
The synchronization of the style class is done in the method
anyControllerMethod, which is used to load the XML fragment and open the dialog, as described above. In order to pass the content density to the dialog, the highlighted coding has been added to this method.
The added code registers a callback function that is executed when the loading of the fragment could be completed successfully. The dialog instance is passed to this callback function.
By calling the
bind method on the added callback function, it is achieved that the
this keyword in the implementation of the callback function has the value which is passed to the
bind method. That is,
this references the view controller within the callback function.
In the callback function, the
sap/ui/core/syncStyleClass function is used to apply the content density set for the view to the dialog instance. For this purpose, the content density currently used in the application is queried via the
getContentDensityClass method of the component controller.
getContentDensity method must have been created by the developer beforehand and implemented accordingly (see above).
For details on how to use the
sap/ui/core/syncStyleClass function, see the API Reference in the Demo Kit.
In order to chain the
then method, the callback function returns the dialog instance
oDialog. This ensures that this instance is passed to the next registered fulfill callback.