We often get questions about UI customization of the RootCause popup dialogs. In this post we’ll show you just how easy it is to customize the colors and texts with a few parameters. Let’s get started!
Customizing the feedback button
To customize the feedback button, you put the config options in the showFeedbackButton object. Open its documentation to see all the configuration options:
If you want to localize the text for the Feedback button to Japanese, you can do so with the ‘text’ config:
|
1 2 3 4 5 |
var logger = new RC.Logger({ showFeedbackButton : { text : 'フィードバック' } }); |
Or maybe you just want colors to match your company profile, the simply change the colors with the following configs:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var logger = new RC.Logger({ showFeedbackButton : { // Text color used on the button and form textColor : '#fff', //Background color for the feedback button and form backgroundColor : '#0088d1', //The color used as background in text fields foregroundColor : '#fff', //The background color for buttons and highlight/hover color for the feedback button buttonColor : '#eee', //The background color when hovering form buttons buttonHoverColor : '#D7CCC8', //The color for text in buttons and header buttonTextColor : '#555', //The feedback button background color feedbackButtonColor : '#eee', //The feedback button text color feedbackButtonTextColor : '#555' } }); |
Now the feedback button looks like this:
To see all available config options, please refer to the documentation.
Customizing the confirmation dialog
The confirmation dialog is shown (if enabled) when an error happens to allow a user to decide if the error data should be logged. The dialog styles can be modified according to your needs. If you open the documentation, you see the available configuration options. Let’s change a few properties, add a custom header/intro text and a gray header/button color:
|
1 2 3 4 5 6 7 8 9 |
window.logger = new RC.Logger({ captureScreenshot : true, showErrorDialog : { titleText : 'Oops... An error happened', introText : 'Please help us improve this application', buttonColor : 'gray' } }); |
Results in the following:
Do you have any additional customization needs not met by our current API? Please let us know and we’ll do our best to support you. Happy customization!
Leave a Reply