Personalização de caixas de diálogo de erro customizing-error-dialogs
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.
A área de trabalho do AEM Forms permite personalizar caixas de diálogo de erro. Execute o Etapas genéricas para personalização do espaço de trabalho do AEM Forms seguido pelas etapas abaixo para personalizar caixas de diálogo de erro.
Personalização de texto customizing-text
-
No
/apps/ws/locales/en-US/translation.json
, altere os valores dewserror
aos valores personalizados. Por exemplo: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 Adicione pares de valores chave correspondentes para todos os idiomas compatíveis.
Personalização de CSS customizing-css
-
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 na
/apps/ws/css/newStyle.css
arquivo: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; }
-
Para a extensão do botão da barra dos pés, separe a
.error-dialog
e.foot-bar
é expandido a partir da lista composta. Para fazer essa alteração, adicione o seguinte no arquivo newStyle.css: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
Se estiver se referindo a imagens adicionais, adicione-as na hierarquia desejada em
/apps/ws/images
.Exemplos examples
- Para personalizar a caixa de diálogo de erro, altere:
.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;
}
- Para personalizar o cabeçalho da caixa de diálogo de erro, altere:
.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