How to define custom properties for Screen Mockup Widgets

Overview

The Screen Mockups editor is a full-featured designer in TopTeam for creating screen prototypes for applications or web pages. It can be used to design application pages, web forms and can present the transition throughout different pages.

TopTeam provides a wide range of widgets using which you can create mockups for your application. Each widget has its own set of properties.
Based on your requirements, if you need a certain property for a widget that is not readily available in TopTeam, then you can create it using Custom Properties feature.

You can define custom properties for Screen Mockup widgets as per your needs and specify values for it, e.g. Maximum width, Is video link available?, etc.
You can also further specify properties for each defined custom property.

This article describes the procedure for defining and applying custom properties to Screen Mockup widgets.

Who should read this?

  • TopTeam Users

Step 1. Go to Administration section

wpid37043-media_1500013403723.png

 

Step 2. Click Configure System Wide Settings

wpid37044-media_1500013979341.png

 

Step 3. Click Configure Global Settings

wpid37045-media_1500014176054.png

 

Global Settings editor opens

wpid37046-media_1500015998847.png

 

Step 4. Select Screen Mockup Widgets Custom Properties

wpid37047-media_1500025299591.png

You can define custom properties for:
1. All Widgets – If this option is chosen, you can define custom properties that will be applicable to all Screen Mockup widgets.
2. Specific Widget – If this option is chosen, you can define custom properties that will be applicable to a chosen widget.

Step 5. Defining a Custom Property

Step 5.1. Add a Custom Property

wpid37049-media_1511874366449.png

 

Step 5.2. Enter Custom Property name and specify values

wpid37050-media_1512128406157.png

 

Step 5.3. You can specify further properties

wpid37051-media_1512128493295.png

 

Step 5.4. Save the changes made to Screen Mockup Widgets Custom Properties settings

wpid37052-media_1512128564055.png

In the following steps, how saved custom properties are used in Screen Mockups is described.

Step 6. Open a Screen Mockup and add a Text Edit e.g. Password Text Edit

wpid37053-media_1512128854427.png

 

Step 7. A confirmation message displays

wpid37048-media_1500032658207.png

This message displays because a value for the custom property was not specified.

Specify value for the custom property and save the mockup

wpid37054-media_1512129367772.png

Revised: July 19th, 2019