In this post I want to give you one of the ways that you could customize the APEX Error page for when you don't want to use the classic default error page.
First of all, we see that, although our application is defined to use the Spanish language, – observando el texto en español en la segunda sentencia- we can see that the internal APEX message is in English, and certainly seeing this error page like this is not very attractive, is it?
To manage APEX internal messages and translate them into our language we will use the feature in the Globalization section called Text Messages.
Ingresamos a Shared Components –> Globalization –> Text Messages
Click on the button Create Text Message
A modal window opens in which we are going to enter:
- The name of the APEX error code (apex_error_code), in this case it is: APEX.AUTHORIZATION.ACCESS_DENIED
- Language: Spanish
- The text of the message:
<h1>Acceso Denegado</h1>
<p>No tiene permiso para ingresar a esta página. </p>
<p>Ponte en contacto con tu administrador de TI para obtener acceso. </p>
We generate the error again and now it is displayed as follows:
Okay, now let's move on to the interesting part, the customization of this page.
The first thing we need to do is to visualize what type of page template the APEX error page is using.
Para ello volvemos a Shared Components –> User Interface –> Themes.
Select Universal Theme 42
We check in the default components which page template is assigned for the error page.
As we can see in the image above, the template that uses the error page is the login page.
Next we go back to the shared components and enter the Templates option in the User Interface section.
APEX groups the templates by type, in this case we need to create a page type template and for this we will make a copy of the login template.
We will give it a name, for example: Custom Error Page.
Then we open the template. APEX templates have several sections, in our case as we want to use this page as the error page, where we are going to make the changes will be in section Error Page Template Control.
This template supports the following substitution strings:
#MESSAGE# and #ADDITIONAL_INFO#: places the error message.
#TECHNICAL_INFO#: shows detailed information about internal errors that will only be visible to developers.
#BACK_LINK#: shows a link to the previous page.
#OK# and #RETURN_TO_APPLICATION#returns translated text strings.
Vamos a reemplazar el código HTML contenido en la sección Error Page Template Control –> Error Page Template:
In which we see the substitution chains:
<div class="t-Alert t-Alert--danger t-Alert--wizard t-Alert--defaultIcons">
<div class="t-Alert-wrap">
<div class="t-Alert-icon">
<span class="t-Icon"></span>
</div>
<div class="t-Alert-content">
<div class="t-Alert-body">
<h1 class="t-Alert-errorTitle">#MESSAGE#</h1>
<p>#ADDITIONAL_INFO#</p>
<div class="t-Alert-inset">#TECHNICAL_INFO#</div>
</div>
</div>
<div class="t-Alert-buttons">
<button onclick="#BACK_LINK#" class="t-Button t-Button--hot w50p t-Button--large" type="button">#OK#</button>
</div>
</div>
</div>For our own HTML:
<div id="error-page">
<div class="content">
<h2 class="header" data-text="Error">
Error
</h2>
<h4 data-text="Mensaje">
#MESSAGE#
</h4>
<div class="t-Alert-inset">#TECHNICAL_INFO#</div>
<div class="btns">
<button onclick="#BACK_LINK#" class="t-Button t-Button--hot w50p t-Button--large" type="button">#OK#</button>
</div>
</div>
</div>
Before applying the changes, we need to give CSS styles to this HTML, to do this we go to the section Cascading Style Sheet and place the following CSS rules.
To learn more about Google Fonts I leave you the following link: https://developers.google.com/fonts/docs/getting_started
To study about CSS rules I recommend this website: https://www.w3schools.com/css/default.asp
It is time to enter these CSS rules:
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
background: -webkit-repeating-linear-gradient(-45deg, #0000FF, #1E90FF, #87CEEB, #ADD8E6, #00BFFF, #87CEFA, #00FFFF);
background-size: 400%;
}
#error-page{
position: absolute;
top: 10%;
left: 15%;
right: 15%;
bottom: 10%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
#error-page .content{
max-width: 900px;
text-align: center;
}
.content h2.header{
font-size: 18vw;
line-height: 1em;
position: relative;
}
.content h2.header:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
background: -webkit-repeating-linear-gradient(-45deg, #0000FF, #1E90FF, #87CEEB, #ADD8E6, #00BFFF, #87CEFA, #00FFFF);
background-size: 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1px 1px 2px rgba(255,255,255,0.25);
animation: animate 10s ease-in-out infinite;
}
@keyframes animate {
0%{
background-position: 0 0;
}
25%{
background-position: 100% 0;
}
50%{
background-position: 100% 100%;
}
75%{
background-position: 0% 100%;
}
100%{
background-position: 0% 0%;
}
}
.content h4{
font-size: 1.5em;
margin-bottom: 20px;
text-transform: uppercase;
color: #000;
font-size: 2em;
max-width: 900px;
position: relative;
}
.content h4:after{
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
text-shadow: 1px 1px 2px rgba(255,255,255,0.4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content p{
font-size: 1.2em;
color: #0d0d0d;
}
.content .btns{
margin: 25px 0;
}
And then we apply the changes.
Note: If it happens to you like me that sometimes you don't know how to combine colors to make a gradient, I tell you that I asked for help to the AI 😊, now that it's so fashionable, I'm discovering how to use it.
And this was what he answered me 😉.
Now it is time to assign our template as the default error page.
Para ello volvemos a Shared Components –> User Interface –> Themes.
Select Universal Theme 42.
And we assign to the component Error Page be displayed with the template Custom Error Page.
We apply the changes.
We force again to generate the error and we can see the changes.
As we are in development mode, the page is displayed as follows:
In which we see the technical information.
The end user would see the error page in this other form:
When we click on the Accept returns to the previous page.
I shared this because Tomás, a student asked me about this topic and I thought it would be a good idea to write it down and share it with the community.
I hope it is useful and if you find another way to customize this page I invite you to comment below, so we all learn!
See you next time!