In erwin ER360, homepage customization is designed to be flexible while remaining controlled within the platform’s framework. The customization capabilities are primarily delivered through homepage widgets and custom content blocks, rather than a fully unrestricted web development environment.
It is important to note that the ER360 homepage does not function as a completely free-form web page. Instead, it allows administrators and users to enhance the interface by embedding structured content using HTML and CSS, with support for limited functionality.
Within these constraints, users can implement a variety of presentation and layout enhancements. Standard HTML elements such as headings, paragraphs, lists, tables, links, and images are supported and can be used to organize and display information effectively. Additionally, inline CSS and embedded style blocks can be applied to control formatting, including layout structure, colors, spacing, and typography.
Depending on the specific ER360 deployment and its security configuration, limited inline JavaScript may also be permitted. However, in most enterprise environments, scripting capabilities are restricted or disabled to ensure security and compliance.
Overall, ER360 homepage customization provides a practical and controlled way to create structured, user-friendly interfaces. While it does not offer the full flexibility of traditional web development, it supports enough HTML and CSS functionality to build informative dashboards, navigation hubs, and communication panels tailored to organizational needs.
The following table provides a detailed breakdown of the supported elements and recommended approaches for effectively customizing the ER360 homepage.
| Element Type | HTML Tag / Feature | Purpose | Example Usage (simplified) |
|---|---|---|---|
| Headings | h1, h2, h3 | Create titles and section headers | <h1>Homepage</h1> |
| Paragraph | p | Display standard text content | <p>Welcome to ER360</p> |
| Line Break | br | Adds spacing or new line | Line1<br>Line2 |
| Horizontal Line | hr | Divider between sections | <hr> |
| Links | a | Navigate to other pages or resources | #Open Mart</a> |
| Images | img | Display logos or visuals | image.png |
| Unordered List | ul, li | Bullet-point lists | <ul><li>Item</li></ul> |
| Ordered List | ol, li | Numbered steps or sequences | <ol><li>Step</li></ol> |
| Tables | table, tr, th, td | Display structured data (models, status) | <table><tr><td>Data</td></tr></table> |
| Div Container | div | Group content and control layout | <div>Content block</div> |
| Flex Layout | display:flex | Create horizontal layout sections | style="display:flex" |
| Grid Layout | display:grid | Create structured columns/rows | style="display:grid" |
| Inline Styling | style="" | Apply quick CSS to elements | <p style="color:blue">Text</p> |
| CSS Block | style tag | Define reusable formatting rules | <style>p{color:red;}</style> |
| Buttons (styled links) | a + CSS | Create clickable UI buttons | <a class="button">Click</a> |
| Cards | div with border/padding | Create boxed UI sections | <div style="border:1px solid"> |
| Alerts / Banners | div with background color | Display announcements or warnings | <div style="background:yellow">Alert</div> |
| Font Styling | CSS properties | Control size, color, font | font-size, color |
| Colors | CSS | Customize UI appearance | background-color:#f5f5f5 |
| Icons (optional) | <i> or emoji | Add visual indicators | 📊, <i class="fa fa-db"> |
HTML example:
<!DOCTYPE html>
<html>
<head>
<title>ER360 Homepage Demo</title>
<style>
body {
font-family: Segoe UI, Arial, sans-serif;
background-color: #f5f7fa;
margin: 20px;
}
h1 {
color: #2b579a;
}
.container {
display: flex;
gap: 20px;
margin-top: 20px;
}
.card {
flex: 1;
border: 1px solid #ccc;
border-radius: 10px;
padding: 15px;
background: white;
}
.button {
display: inline-block;
padding: 8px 12px;
margin-top: 5px;
background-color: #2b579a;
color: white;
text-decoration: none;
border-radius: 5px;
}
.alert {
margin-top: 20px;
padding: 10px;
background-color: #fff3cd;
border: 1px solid #ffeeba;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
th {
background-color: #2b579a;
color: white;
}
</style>
</head>
<body>
<!-- Headings -->
<h1>ER360 Homepage</h1>
<h2>Customization Demo</h2>
<h3>Section Title</h3>
<!-- Paragraph -->
<p>This page shows all supported HTML elements for ER360 homepage customization.</p>
<!-- Link -->
<p>
<a href="https://support.quest.com" target="_blank">Support Portal</a>
</p>
<!-- Image -->
<img src="https://via.placeholder.com/150" alt="Sample Image" />
<!-- Layout Cards -->
<div class="container">
<!-- Card 1 -->
<div class="card">
<h3>Quick Links</h3>
<!-- Button style links -->
<a href="#" class="button">Open Mart</a><br>
<a href="#" class="button">Browse Models</a>
<!-- Lists -->
<ul>
<li>Manage Models</li>
<li>Run Reports</li>
</ul>
<ol>
<li>Login</li>
<li>Select Model</li>
</ol>
</div>
<!-- Card 2 -->
<div class="card">
<h3>Model Status</h3>
<!-- Table -->
<table>
<tr>
<th>Model</th>
<th>Status</th>
</tr>
<tr>
<td>Customer</td>
<td>Active</td>
</tr>
<tr>
<td>Orders</td>
<td>Draft</td>
</tr>
</table>
</div>
</div>
<!-- Alert / Announcement -->
<div class="alert">
⚠ Maintenance scheduled for Friday at 8 PM.
</div>
<!-- Horizontal Line -->
<hr>
<!-- Inline styled text -->
<p style="color: green; font-size: 16px;">
This is styled text using inline CSS.
</p>
</body>
</html>
Result:
