Foutdialoogvensters aanpassen customizing-error-dialogs
In de werkruimte van AEM Forms kunt u dialoogvensters met fouten aanpassen. Voer de Algemene stappen voor de aanpassing van de de werkruimte van AEM Formsuit die door de hieronder stappen wordt gevolgd om foutendialogen aan te passen.
Tekst aanpassen customizing-text
-
Wijzig in het bestand
/apps/ws/locales/en-US/translation.json
de waarden vanwserror
in de aangepaste waarden. Bijvoorbeeld:code language-json "wserror" : { "message" : "Message:", "ComponentUI" : "Component UI:", "error" : "Error", "ok" : "Ok", "ErrorCode" : "Error Code:" }
Naar
code language-json "wserror" : { "message" : "Error Message:", "ComponentUI" : "UI Component:", "error" : "Something went wrong!!", "ok" : "Ok", "ErrorCode" : "Error Code:" }
note note NOTE Voeg overeenkomstige sleutel-waarde paren voor alle gesteunde talen toe.
CSS aanpassen customizing-css
-
U kunt dialoogvensters, koptekst, inhoudsgebieden, voetbalk, voetbalknoppen en andere elementen bijwerken door het volgende fragment toe te voegen in het
/apps/ws/css/newStyle.css
-bestand: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; }
-
Voor het bereik van de voetbalkknop scheidt u de knopbereiken
.error-dialog
en.foot-bar
van de samengestelde lijst. U brengt deze wijziging door het volgende toe te voegen in het bestand 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; }
Naar
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, .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
.Voorbeelden examples
- om de foutendialoog aan te passen, verander:
.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;
}
Naar
.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;
}
- om de kopbal van de foutendialoog aan te passen, verander:
.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;
}
Naar
.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;
}