Customizing error dialogs

Last update: May 24, 2024

CREATED FOR:

  • User
  • Developer

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

Customizing Text

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

    "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
    Add corresponding key-value pairs for all supported languages.

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:

    /*-------- 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:

    
.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

  • 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;
}

Experience Manager


Espressos & Experience Manager: AEM Forms

Espressos & Experience Manager

Thursday, Mar 6, 7:00 PM UTC

Join Adobe's AEM product team as they highlight AEM Forms' latest innovations, including: the new Gen AI Assistant, Unified Composition with AEM Sites, and new ways to deploy forms through conversations.

Register

Connect with Experience League at Summit!

Get front-row access to top sessions, hands-on activities, and networking—wherever you are!

Learn more

Register now