SSB9 Tech Stack: Step 4 ‐ Frontend Service Layer - Arch-Node/personal_studies GitHub Wiki

Back to SSB9 Tech Stack Overview

Ellucian Self-Service Banner 9 (SSB9) uses modern JavaScript frameworks to build a responsive and dynamic user interface. The frontend service layer ensures:

• Seamless interaction between users and backend services.
• Efficient API communication using JavaScript-based fetch or AJAX requests.
• Dynamic UI rendering with minimal page reloads.
• Consistent UI/UX through the Ellucian Design System (EDS).

• Angular: Most commonly used, leveraging TypeScript, services, and component-based design.
• React: Found in newer Ellucian updates, offering a lightweight alternative with reusable UI components.

• Component-based architecture (Modular UI elements).
• State management for UI updates without full-page reloads.
• Optimized performance through asynchronous data fetching.

The frontend communicates with the backend using REST API calls.

Example: Fetch API call to get student advising appointments

fetch('https://banner.university.edu/api/student/advising/appointments', {
    method: 'GET',
    headers: {
        'Authorization': `Bearer ${localStorage.getItem('jwt_token')}`,
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => console.log(data));

• The browser sends a request to the backend API.
• The API returns JSON data, which the frontend dynamically processes.
• Data is displayed on the UI without a full-page refresh.

Angular Example: Fetching and Displaying Appointments

export class AdvisingComponent implements OnInit {
    appointments: any[] = [];
    constructor(private http: HttpClient) {}
    ngOnInit() {
        this.http.get('/api/student/advising/appointments').subscribe(data => {
            this.appointments = data['appointments'];
        });
    }
}

• Component Lifecycle Hooks ensure that data is fetched when the page loads.
• Dynamic UI Updates occur when the appointments array is modified.

SSB9 follows the Ellucian Design System (EDS) to ensure a consistent UI across applications.

• Universities can customize styles using CSS/SCSS.
• Branding adjustments can be made by overriding EDS variables.

Example: SCSS Styling for Custom Header

.banner-header {
    background-color: #003366; /* University branding */
    color: white;
    padding: 10px;
}

The frontend ensures secure access by storing JWT tokens from the authentication step.

• Local Storage: Persisting tokens across sessions.
• Session Storage: Clearing tokens on session end.
• HTTP-only Cookies: Enhanced security against XSS attacks.

Example: Including JWT in API Requests

const token = localStorage.getItem('jwt_token');
fetch('/api/user/dashboard', {
    headers: { 'Authorization': `Bearer ${token}` }
})
.then(response => response.json())
.then(data => console.log(data));

The frontend listens for user interactions and sends appropriate requests to the backend.

Example: Booking an Advising Appointment

bookAppointment(appointmentId) {
    fetch('/api/student/advising/book', {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${localStorage.getItem('jwt_token')}`,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: appointmentId })
    })
    .then(response => response.json())
    .then(data => console.log('Appointment booked!', data));
}

To enhance user experience, error messages are displayed when API calls fail.

Example: Handling API Errors in Angular

this.http.get('/api/student/advising').subscribe({
    next: (data) => this.appointments = data,
    error: (err) => console.error('Error loading appointments', err)
});

• If the API fails, an error message is logged.
• Users receive feedback through UI alerts.

Once data is received, Angular or React dynamically updates the HTML.

Example: Angular Dynamic Rendering of Appointments

<div *ngFor="let appointment of appointments">
    <p><strong>Advisor:</strong> {{ appointment.advisor }}</p>
    <p><strong>Date:</strong> {{ appointment.date }}</p>
    <p><strong>Location:</strong> {{ appointment.location }}</p>
</div>

• No page reloads: Data updates dynamically.
• Improved performance compared to older versions of Banner.

User → Browser (Angular/React) → API Call to Backend → JSON Response → Dynamic UI Update → HTML Display

The Ellucian SSB9 Frontend Service Layer leverages modern JavaScript frameworks like Angular and React to provide a responsive, efficient, and scalable user interface. By integrating REST API calls, component-based architecture, UI theming, authentication handling, and robust error management, SSB9 ensures a seamless and dynamic experience for users. The adoption of the Ellucian Design System (EDS) further enhances UI/UX consistency across applications. Future improvements may focus on performance optimizations and introducing additional React-based components to enhance maintainability and modularity.