Customizing Spiderly Application's UI

Spiderly offers full flexibility when it comes to UI customization. While you're not required to use the default Angular-based UI or the Spiderly Angular library, doing so provides the best integration and experience.

This step-by-step guide will show you how to customize key UI elements of your Spiderly app, including: app name, logo, favicon, theme colors, layout menu position, and displaying time in calendar control.

Change the App Name

In the frontend project opened with Visual Studio Code, locate the src\environments\environment.ts file and change the value of companyName to your the desired app name.

Change the Logo

In the frontend project opened with Visual Studio Code, locate the src\assets\images\logo\logo.svg file and replace it with your own logo.svg.

ℹ️ If you want to change the logo's path, filename, or file extension, open src\app\business\services\config.service.ts and override the logo path like this:

Change the Favicon

In the frontend project opened with Visual Studio Code, locate the src\assets\images\logo\favicon.ico file and change it with your own favicon.ico.

Change Theme Colors

In the frontend project opened with Visual Studio Code, locate the src\assets\primeng-theme.ts file and edit the theme values, such as the primary.

To enable the dark theme, open the src\index.html file and add the dark class to the html tag, like this:

For reference and advanced theming options, visit the PrimeNG Theming Guide.

Displaying Time in Calendar Control on the Details Page

In the frontend project opened with Visual Studio Code, open the src\app\pages\your-entity-name\your-entity-name-details.html file.
In your details component template (<your-entity-name-base-details>), add the following Angular output binding:

Switching to a Top Menu Layout

By default, Spiderly generates your app with a side menu layout. However, if you'd prefer a top menu layout and either forgot to use the --top-menu flag during spiderly init or changed your mind later in development, you can easily update it by following these steps:

In the frontend project opened with Visual Studio Code, open the src\app\business\layout\layout.component.html file.
Update the layout component by setting the [isSideMenuLayout] attribute to false:

If you want to add custom actions (buttons, links, or any other content) to the header area, positioned to the left of the profile avatar, you can do so like this:

Using the Spiderly Data View Component

If you want to display data in a cleaner, card-based layout instead of a plain table — while still keeping filtering capabilities — you can use the spiderly-data-view Angular component.

In your html file:

In your ts file: