DocumentaciónAEM 6.4Guía de Forms

Personalizar cuadros de diálogo de error customizing-error-dialogs

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

El espacio de trabajo de AEM Forms le permite personalizar los cuadros de diálogo de error. Realice los pasos genéricos para personalizar AEM Forms Workspace seguido de los siguientes pasos para personalizar los cuadros de diálogo de error.

Personalizar texto customizing-text

  1. En el archivo /apps/ws/locales/en-US/translation.json, cambie los valores de wserror a los valores personalizados. Por ejemplo:

    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
    Agregar los pares clave-valor correspondientes para todos los idiomas compatibles.

Personalizar CSS customizing-css

  1. Puede actualizar el cuadro de diálogo, el encabezado, el área de contenido, la barra inferior, los botones de la barra inferior y otros elementos colaterales si agrega el siguiente fragmento de código en el archivo /apps/ws/css/newStyle.css:

    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. Para el espacio del botón de inferior, separe el .error-dialog y el botón .foot-bar se expandirá desde la lista compuesta. Para realizar este cambio, agregue lo siguiente al archivo 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
Si hace referencia a imágenes adicionales, agréguelas a la jerarquía deseada debajo de /apps/ws/images.

Ejemplos examples

  • Para personalizar el cuadro de diálogo de error, cambie lo siguiente:
.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 el encabezado del cuadro de diálogo de error, cambie lo siguiente:
.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