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, open 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 your logo file is not named logo.svg or you want to use a custom path, open the src\app\business\services\config.service.ts file 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, open the src\assets\primeng-theme.ts file and edit the theme values, such as the primary.

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

Enable Dark Theme

In the frontend project opened with Visual Studio Code, open the src\index.html file and add the dark class to the html tag, like this:

For more information and advanced dark theme options, visit the PrimeNG Dark Theme Guide.

Displaying Time in Calendar Control on 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, locate the <your-entity-name-base-details> component, and add the following Angular input attribute:

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: