自定義錯誤對話框

AEM Forms工作區可讓您自訂錯誤對話方塊。 執行AEM Forms工作區自訂的一般步驟,然後執行下列步驟以自訂錯誤對話方塊。

自訂文字

  1. /apps/ws/locales/en-US/translation.json檔案中,將wserror的值變更為自訂值。 例如:

    "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:"
     }
    
    注意

    為所有支援的語言新增對應的金鑰值配對。

自訂CSS

  1. 您可在/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;
    }
    
  2. 對於腳條按鈕跨度,請將.error-dialog.foot-bar按鈕跨度從複合清單中分開。 若要進行此變更,請在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;
    }
    
注意

如果您轉介至其他影像,請在/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;
}

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now