Customising a Canvas

Beyond customising individual widgets, you can personalise your canvas further by:

• Adding Sidebar Items

• Adding a Logo and Colours

• Advanced Configuration

• Changing the Color Theme

Before starting this tutorial, you need to have a knowledge in creating a canvas in Lucy.

Creating a Canvas

Adding a Sidebar Item to Your Canvas

Add Sidebar items/links help you to navigate to different pages in your canvas. They are typically located on the left side of your canvas for easy access.

There are two ways to create a sidebar item on your canvas.

1. Selecting from an Existing Sidebar Item

2. Creating a New Sidebar Item

Selecting from an Existing Sidebar Item

Developers can use the React toolkit (lucy-xp) to build widgets and register sidebar links, which can then be added to a canvas.

To Select from an Existing Sidebar Item

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.

5. Then, click Customise this Canvas.

6. Click the Add Item button.

7. Pick the Select from an Existing One tab.

8. Sidebar Link: Select the required existing sidebar link from the list.

9. Custom Label: Type in the name to be displayed in the link and the existing label will be replaced by the entered one or keep the existing label if necessary.

10. User Roles: Select required user groups who has access to the link. To allow anyone to access it, do not select any.

11. Click Save.

12. Click Save once again.

13. You will see a sidebar link added to your canvas.

Creating a New Sidebar Item

You can create a sidebar item/links in your canvas to open a URL, launch a secondary canvas, or make it a dropdown list.

Create a New Sidebar Item to Open a URL

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Customise this Canvas.

6. Click the Add Item button.

7. Pick the Create a New One tab.

8. Label:Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose.

9. Type: There are three types of sidebar items: Open URL, Open a Secondary Canvas and Create a Dropdown. Select Open URL to open an external link when the sidebar item is clicked.

10. URL: Enter the URL.

11. Open link in: Select to open in a new tab or in the same tab.

12. User Roles: Select required user groups who has access to the link. To allow anyone to access it, do not select any.

13. Click Save.

14. Click Save once again.

15. You will see a sidebar link added to your canvas. Click on it to open the web page.

Create a New Sidebar Item to Open a Secondary Canvas

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Customise this Canvas.

6. Click the Add Item button.

7. Pick the Create a New One tab.

8. Label: Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose, e.g., Property Management.

9. Type: There are three types of sidebar items: Open URL, Open a Secondary Canvas and Create a Dropdown. Choose the required type.

10. Select Open a Secondary Canvas to create an additional canvas on your current canvas.

    1. Name: Enter a name for the secondary canvas.

    2. User Roles: Select required user groups who has access to the link. To allow anyone to access it, do not select any.

    3. Click Save.

11. Click Save once again.

12. You will see a sidebar link added to your canvas. Click on it and you will see an additional empty canvas opened on the same tab. Customise it as needed.

Create a New Sidebar Item as a Dropdown

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Customise this Canvas.

6. Click the Add Item button.

7. Pick the Create a New One tab.

8. Label: Enter an appropriate label for the sidebar item. This label will be displayed to users, so it should be easy to understand and relevant to the item's purpose.

9. Type: There are three types of sidebar items: Open URL, Open a Secondary Canvas and Create a Dropdown. Select Create a Dropdown option to make the sidebar item a dropdown and configure options to be displayed under the dropdown list.

   1. Add dropdown options under the sidebar item.

      1. Click Add Item.

      2. Select from an Existing Item tab: Pick this tab to select an existing sidebar item as the dropdown option.

      3. Create a New One tab: Pick this tab to create a new dropdown option.

         1. Label: Enter an appropriate label for the dropdown option.

         2. Type: There are two types of options: Open URL and Open a Secondary Canvas.

         3. Configure the details as necessary.

      4. Add more options under the dropdown as necessary.

10. Click Save.

11. Click Save once again.

12. You will see a sidebar link added to your canvas. Click on it to expand it and view the configured options under it.

13. Click on each option to see its functionality.

Adding a Logo and Colours

Add your logo to your canvas and customise the colors of the sidebar and the header.

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Customise this Canvas.

6. Add a Logo to your canvas.

   1. Navigate to the left sidebar section of the canvas.

   2. Click the icon at the top left.
   3. To add a logo, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.

   4. Click Upload.

7. Add a gradient colour to the sidebar.

   1. Navigate to the left sidebar section of the canvas.

   2. Pick required colours.

8. Add a header colour or a background image.

   1. Navigate to the header section of the canvas.

   2. To add a header colour, pick the required colour.

   3. Add a background image.

      1. Click icon.
      2. To add a background image, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.

      3. Click Upload.

9. Add a canvas background image.

   1. Navigate to the footer section of the canvas.

   2. Click icon.
   3. To add a background image, either drag and drop the desired image onto the designated upload area or paste the image's URL into the provided field.

   4. Click Upload.

10. Blur Background: Select this option to apply a blurred effect to the canvas background.

11. Click Save.

Advanced Configuration

Under Advanced Configuration, you have two options.

1. Set as Default

2. Clear Dashboard

Set as Default

Any canvas can be personalised. Although, it's the same canvas, the content in it can vary depending on the user. By setting a canvas as default, all users can see the same content. Any modifications to the canvas done by a user will be overridden by the default settings, preserving the original configuration.

To Set a Canvas as Default

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Advanced Configuration.

6. Click Set as Default.

7. Click the Exit button to leave the edit mode.

8. Your canvas is now set as the default.

9. Log in to Lucy using a different account and open the same canvas.

10. Modify the canvas, e.g., Add a widget.

11. Switch back to your account and open the canvas.

12. You will see that the modifications not applied to the canvas.

Clear Dashboard

Clearing a Dashboard involves removing all widgets from your canvas.

To Clear Your Dashboard

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Cutomise icon in the bottom right corner.
5. Then, click Advanced Configuration.

6. Click Clear Dashboard.

7. All the widgets added to the canvas will be removed.

8. Click the Exit button to leave the edit mode.

Changing the Color Theme

Color theme is the overall color palette used in your canvas. You can often choose between a dark or light theme to change the appearance of the background, text, and other elements.

1. On the Lucy app homepage, go to the Gallery tab.

2. Gallery page will open.

3. On the Gallery page, find and click on your canvas to open it.

4. Click the Colour Pallet icon . When you create a new canvas, the light mode is activated by default.
5. Dark mode: Click the Dark option to switch from light mode to dark.

6. Light mode: Click the Light option to switch from dark mode to light.