Individual components placed within the composite component apply the component style of the default theme. If you want a style that applies only to the composite component you are deploying, you can use the XCSS file and the cssclass property.
Editing XCSS File & Applying to Screen
When generating a module project, the XCSS file is automatically generated with the project name. The generated file can be found in the Resource Explorer tab.
1
Select the xcss file in the Resource Explorer tab and click [Edit] item from the context menu to open the CSS editing window.
2
Modify the code as shown below in the Text tab. Add the Calendar selector and add an item called simple_module as the class selector.
.Calendar.simple_module .datepicker .head
{
background : orangered;
}
.Calendar.simple_module .datepicker .body .weekband
{
background : orangered;
}
.Calendar.simple_module .datepicker .body
{
-nexa-border : 1px none transparent;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=saturday]
{
color : #333333;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=sunday]
{
color : #333333;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=saturday]
{
color : #ffffff;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=sunday]
{
color : #ffffff;
}
.Calendar.simple_module_purple .datepicker .head
{
background : #C785C8;
}
.Calendar.simple_module_purple .datepicker .body .weekband
{
background : #C785C8;
}Please refer to the link below for the CSS editing window feature.
3
Select the xcdl file in the Project Explorer tab and click the [Edit] item from the context menu to open the composite component screen.
4
Specify the cssclass property value of 2 Calendar components to "simple_module". You can see that the style of the components has been changed.
5
Generate a module installation file. You can see that the xcss file is deployed together without any additional settings.
Installing Module & Checking Applied Style
The steps to install the module are the same until the step of selecting the composite component. In the corresponding step, click the [Next] button and select the App to apply Style.
1
Check the name of the composite component to install and click the [+] button and the [Next] button.
2
Specify the App object to apply in the style setting screen. You can see that the xcss file has been added in bold text.
3
Click the [Install] button to install the module.
4
Open the Form screen where the composite component is placed or generate a new Form to place the composite component and check whether the specified style is applied.