DocumentationAEM 6.4Forms Guide

Customizing error dialogs customizing-error-dialogs

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

CREATED FOR:

  • User
CAUTION
AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

AEM Forms workspace allows you to customize error dialogs. Perform the Generic steps for AEM Forms workspace customization followed by the steps below to customize error dialogs.

Customizing Text customizing-text

  1. In the /apps/ws/locales/en-US/translation.json file, change the values of wserror to the customized values. For example:

    code language-none 
    "wserror" : {
 "message" : "Message:",
 "ComponentUI" : "Component UI:",
 "error" : "Error",
 "ok" : "Ok",
 "ErrorCode" : "Error Code:"
 }

To
 "wserror" : {
 "message" : "Error Message:",
 "ComponentUI" : "UI Component:",
 "error" : "Something went wrong!!",
 "ok" : "Ok",
 "ErrorCode" : "Error Code:"
 }
    note note
    NOTE
    Add corresponding key-value pairs for all supported languages.

Customizing CSS customizing-css

  1. You can update dialog, header, content area, foot-bar, foot-bar buttons, and other collaterals by adding the following snippet in the /apps/ws/css/newStyle.css file:

    code language-css 
    /*-------- Error Dialog -------------------------------------------------------------------------------------------------------------------*/
.error-dialog{
    border: 2px solid #DEDEDE;
    width: 540px;
    height: 400px;
    position: absolute;
    z-index: 99999;
    left: 50%;
    margin-left: -271px;
    background:#2b2b2b;
    box-shadow:0px 0px 10px 3px #888;
    display:none;
}
.error-dialog .head-bar{
    height: 31px;
    background: url(../images/error.png) no-repeat 7px 10px #DEDEDE;
    color: #2B2B2B;
    font-size: 18px;
    padding-left: 30px;
    padding-top: 7px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.error-dialog .content-area{
    padding: 20px;
    border-bottom: 1px solid #1B1B1B;
    height: 268px;
}
.error-dialog .foot-bar{
    border-top: 1px solid #404040;
    height: 32px;
    padding:10px;
    text-align: right;
}
.error-dialog .foot-bar button{
    background: #52a1dc; /* Old browsers */
    background: -moz-linear-gradient(top,  #52a1dc 0%, #2680ce 100%, #207cca 100%, #2989d8 100%, #207cca 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#52a1dc), color-stop(100%,#2680ce), color-stop(100%,#207cca), color-stop(100%,#2989d8), color-stop(100%,#207cca)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #52a1dc 0%,#2680ce 100%,#207cca 100%,#2989d8 100%,#207cca 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #52a1dc 0%,#2680ce 100%,#207cca 100%,#2989d8 100%,#207cca 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #52a1dc 0%,#2680ce 100%,#207cca 100%,#2989d8 100%,#207cca 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #52a1dc 0%,#2680ce 100%,#207cca 100%,#2989d8 100%,#207cca 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52a1dc', endColorstr='#2680ce',GradientType=0 ); /* IE6-9 */
    border: #4F748F;
    height: 30px;
    width: 100px;
    font-size: 18px;
    color: white;

}
.error-dialog .single-col{
    width: 100%;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.error-dialog .single-col li{
    height: 28px;
    font-size:14px;
    color:#bebebe;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.error-dialog .single-col li label{
    height: 28px;
    color:#fff;
    max-width:100px;
    margin-right: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    float: left;
}
.error-dialog .double-col{
    width: 100%;
    list-style-type: none;
    padding: 0px;
    margin:0px;
}
.error-dialog .double-col li{
    height: 28px;
    font-size:14px;
    color:#bebebe;
    width: 50%;
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.error-dialog .double-col li.small{
    width: 30%;
}
.error-dialog .double-col li.big{
    width: 70%;
}
.error-dialog .double-col li label{
    height: 28px;
    color:#fff;
    max-width:100px;
    margin-right: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    float: left;
}
.error-dialog .scroll-content{
    color:#bebebe;
    font-size:12px;
    height:175px;
    overflow-y:scroll;
    overflow-x:hidden;
    width:100%;

}

.error-background, .popup-background, .wsMessageBackGround, .userInfoBackGround, .busyState, .aboutWorkspaceBG {
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0.6;
    background-color: black;
    left: 0px;
    top: 0px;
    position: fixed;
    z-index: 999;
    margin: 0px;
    padding: 0px;
}

  2. For the foot bar button span, separate the .error-dialog and .foot-bar button spans from the composite list. To make this change, add the following in the newStyle.css file:

    code language-css 
    
.browse-btn span, .attachementbtn span, .cancelAttachmentUpdate span, #taskAttachmentsContainer .uploadStatus span, .submitNoteButton span, .updateNoteButton span, .cancelNoteUpdate span,
#userSearchPopUp #actionbar span, #taskarea .action button span, .error-dialog .foot-bar button span, .oooAction button span, .wsMessageContainerDiv .action button span
{
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

To

.browse-btn span, .attachementbtn span, .cancelAttachmentUpdate span, #taskAttachmentsContainer .uploadStatus span, .submitNoteButton span, .updateNoteButton span, .cancelNoteUpdate span,
#userSearchPopUp #actionbar span, #taskarea .action button span, .oooAction button span, .wsMessageContainerDiv .action button span
{
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/*-------- Customized following Portion --------*/
.error-dialog .foot-bar button span
{
    display: block;
    text-overflow: ellipsis;
    text-decoration:underline;
    white-space: wrap;
}
NOTE
If you are referring to additional images, add them at the desired hierarchy under /apps/ws/images.

Examples examples

  • To customize the error dialog, change:

.error-dialog{
    border: 2px solid #DEDEDE;
    width: 540px;
    height: 400px;
    position: absolute;
    z-index: 99999;
    left: 50%;
    margin-left: -271px;
    background:#2b2b2b;
    box-shadow:0px 0px 10px 3px #888;
    display:none;
}

To

.error-dialog{
    border: 9px solid #DEDEDE;
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 99999;
    left: 50%;
    margin-left: -271px;
    background: url(../images/my-error-bg.png) no-repeat 7px 10px #DEDEDE;
    box-shadow:0px 0px 10px 3px #888;
    display:none;
}
  • To customize the error dialog header, change:

.error-dialog .head-bar{
    height: 31px;
    background: url(../images/error.png) no-repeat 7px 10px #DEDEDE;
    color: #2B2B2B;
    font-size: 18px;
    padding-left: 30px;
    padding-top: 7px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

To

.error-dialog .head-bar{
    height: 40px;
    background: url(../images/error.png) no-repeat 7px 10px #DEDEDE;
    color: #FA0E39;
    font-size: 18px;
    padding-left: 30px;
    padding-top: 15px;
}
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da