A área de trabalho do AEM Forms permite personalizar caixas de diálogo de erro. Execute as etapas genéricas para personalização do espaço de trabalho AEM Forms seguidas pelas etapas abaixo para personalizar caixas de diálogo de erro.
No arquivo /apps/ws/locales/en-US/translation.json
, altere os valores de wserror
para os valores personalizados. Por exemplo:
"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:"
}
Adicione pares de valores chave correspondentes para todos os idiomas suportados.
Você pode atualizar a caixa de diálogo, o cabeçalho, a área de conteúdo, a barra de pé, os botões da barra de pé e outras garantias adicionando o seguinte trecho no arquivo /apps/ws/css/newStyle.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;
}
Para a extensão do botão da barra de pé, separe os botões .error-dialog
e .foot-bar
da lista composta. Para fazer essa alteração, adicione o seguinte no arquivo newStyle.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;
}
Se você estiver fazendo referência a imagens adicionais, adicione-as na hierarquia desejada em /apps/ws/images
.
.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;
}
.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;
}