Customizing Screenparts

Designing with Screenparts

Overview

The design of your screenpart, which you can reuse across the project or share with others, is the screenpart source. Once you add the screenpart to a screen, you have an instance. You can have many instances of the same screenpart in one or many screens.

Any changes you make to the source screenpart are automatically reflected wherever the screenpart is used. At the same time, you have full creative control to override the screenpart instance. And just as easily reset the instance to match the screenpart source.

Teaser

In this topic you will learn to customize a screenpart instance of a banner to meet your needs for a particular screen.

In Brief

These are the main steps of the procedure:

  1. Creating a screenpart.
  2. Adding the screenpart to your screen.
  3. Editing the screenpart instance.
  4. (Optional) Discarding instance changes.

Step By Step

(a-1) 1. Create a screenpart.

  1. In a new project, click on the New button and select the Screenpart option.

  2. Set the screenpart size and background color.

  3. Add elements to the screenpart.

    For this example, add some images and set their transparency to 80%.

  4. Rename your screenpart to Banner.

(a-2) 2. Add the screenpart to your screen.

  1. Create or open a screen, and select the Screenparts tab from the Toolbox.

  2. Drag or double click on the Banner screenpart to add it to the screen.

(a-3) 3. Edit the screenpart instance.

For the Product page, the color of the screenpart source matches the colors used in the screen. But the Blog page uses shades of blue.

To customize the screenpart to go with this particular screen:

  1. In the Blog page, select the Banner screenpart.

  2. Change the background color of the screenpart instance.

Changes you make to an instance won't be overridden by changes in the source. For example, if you change the background color in the screenpart source of this example, the background color in the screenpart instance will still be the blue you just set.

(a-4) 4. (Optional) Discard instance changes.

If you want the screenpart instance to match the screenpart source, simply click on the Reset action in the Properties Panel.

Learn More

Here are some suggested topics: