Show Menu
TÓPICOS×

Personalização de caixas de diálogo de erro

A área de trabalho do AEM Forms permite personalizar caixas de diálogo de erro. Execute as etapas genéricas para personalização da área de trabalho do AEM Forms seguidas pelas etapas abaixo para personalizar caixas de diálogo de erro.

Personalização de texto

  1. No /apps/ws/locales/en-US/translation.json arquivo, 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.

Personalização do CSS

  1. É possível 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 /apps/ws/css/newStyle.css arquivo:
    /*-------- 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. Para a extensão do botão da barra de pé, separe as .error-dialog e .foot-bar as faixas do botão 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 estiver fazendo referência a imagens adicionais, adicione-as na hierarquia desejada em /apps/ws/images .

Exemplos

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