Overview<\/h3>\n\nThe Screen Mockups<\/em> 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.<\/p>\nTopTeam <\/i>provides a wide range of widgets using which you can create mockups for your application. Each widget has its own set of properties.
\nBased on your requirements, if you need a certain property for a widget that is not readily available in TopTeam<\/i>, then you can create it using Custom Properties <\/i>feature.<\/p>\n
You can define custom properties for Screen Mockup<\/i> widgets as per your needs and specify values for it, e.g. Maximum width, Is video link available?<\/i>, etc.
\nYou can also further specify properties for each defined custom property.<\/p>\n
This article describes the procedure for defining and applying custom properties to Screen Mockup<\/i> widgets.<\/p>\n<\/div>\n<\/div>\n\nWho should read this?<\/h3>\n\n\n- TopTeam Users<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n
Step 1. Go to Administration section<\/h3>\n![\"wpid37043-media_1500013403723.png\"](\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\")
<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 2. Click Configure System Wide Settings<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 3. Click Configure Global Settings<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nGlobal Settings editor opens<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 4. Select Screen Mockup Widgets Custom Properties<\/h3>\n<\/div>\n\nYou can define custom properties for:
\n1. All Widgets<\/i> – If this option is chosen, you can define custom properties that will be applicable to all Screen Mockup<\/i> widgets.
\n2. Specific Widget <\/i>– If this option is chosen, you can define custom properties that will be applicable to a chosen widget.<\/p>\n<\/div>\n<\/div>\n\nStep 5. Defining a Custom Property<\/h3>\n<\/div>\n\nStep 5.1. Add a Custom Property<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 5.2. Enter Custom Property name and specify values<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 5.3. You can specify further properties<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 5.4. Save the changes made to Screen Mockup Widgets Custom Properties settings<\/h3>\n<\/div>\n\nIn the following steps, how saved custom properties are used in Screen Mockups<\/i> is described.<\/p>\n<\/div>\n<\/div>\n\nStep 6. Open a Screen Mockup and add a Text Edit e.g. Password Text Edit<\/h3>\n<\/div>\n\n <\/p>\n<\/div>\n<\/div>\n
\nStep 7. A confirmation message displays<\/h3>\n<\/div>\n\nThis message displays because a value for the custom property was not specified.<\/p>\n<\/div>\n<\/div>\n
\nSpecify value for the custom property and save the mockup<\/h3>\n<\/div>\n<\/div>\n\nSee Also<\/h3>\n\nConfiguring Screen Mockup Widgets Custom Properties<\/a>
\nUsing Screen Mockup Widgets<\/a><\/p>\n<\/div>\n<\/div>\n\n\nRevised: July 19th, 2019<\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 <\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[170,94],"class_list":["post-37055","post","type-post","status-publish","format-standard","hentry","category-screen-mockups","tag-custom-properties","tag-mockups"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paoaNA-9DF","_links":{"self":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/comments?post=37055"}],"version-history":[{"count":5,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055\/revisions"}],"predecessor-version":[{"id":49637,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055\/revisions\/49637"}],"wp:attachment":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/media?parent=37055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/categories?post=37055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/tags?post=37055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The Screen Mockups<\/em> 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.<\/p>\n TopTeam <\/i>provides a wide range of widgets using which you can create mockups for your application. Each widget has its own set of properties. You can define custom properties for Screen Mockup<\/i> widgets as per your needs and specify values for it, e.g. Maximum width, Is video link available?<\/i>, etc. This article describes the procedure for defining and applying custom properties to Screen Mockup<\/i> widgets.<\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n You can define custom properties for: <\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n In the following steps, how saved custom properties are used in Screen Mockups<\/i> is described.<\/p>\n<\/div>\n<\/div>\n <\/p>\n<\/div>\n<\/div>\n This message displays because a value for the custom property was not specified.<\/p>\n<\/div>\n<\/div>\n Configuring Screen Mockup Widgets Custom Properties<\/a> Revised: July 19th, 2019<\/p>\n<\/div>\n<\/div>\n<\/div>\n <\/p>\n","protected":false},"excerpt":{"rendered":" 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 <\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[170,94],"class_list":["post-37055","post","type-post","status-publish","format-standard","hentry","category-screen-mockups","tag-custom-properties","tag-mockups"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paoaNA-9DF","_links":{"self":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/comments?post=37055"}],"version-history":[{"count":5,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055\/revisions"}],"predecessor-version":[{"id":49637,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/37055\/revisions\/49637"}],"wp:attachment":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/media?parent=37055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/categories?post=37055"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/tags?post=37055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nBased on your requirements, if you need a certain property for a widget that is not readily available in TopTeam<\/i>, then you can create it using Custom Properties <\/i>feature.<\/p>\n
\nYou can also further specify properties for each defined custom property.<\/p>\nWho should read this?<\/h3>\n
\n
Step 1. Go to Administration section<\/h3>\n
<\/div>\n
Step 2. Click Configure System Wide Settings<\/h3>\n
<\/div>\n
Step 3. Click Configure Global Settings<\/h3>\n
<\/div>\n
Global Settings editor opens<\/h3>\n
<\/div>\n
Step 4. Select Screen Mockup Widgets Custom Properties<\/h3>\n
<\/div>\n
\n1. All Widgets<\/i> – If this option is chosen, you can define custom properties that will be applicable to all Screen Mockup<\/i> widgets.
\n2. Specific Widget <\/i>– If this option is chosen, you can define custom properties that will be applicable to a chosen widget.<\/p>\n<\/div>\n<\/div>\nStep 5. Defining a Custom Property<\/h3>\n<\/div>\n
Step 5.1. Add a Custom Property<\/h3>\n
<\/div>\n
Step 5.2. Enter Custom Property name and specify values<\/h3>\n
<\/div>\n
Step 5.3. You can specify further properties<\/h3>\n
<\/div>\n
Step 5.4. Save the changes made to Screen Mockup Widgets Custom Properties settings<\/h3>\n
<\/div>\n
Step 6. Open a Screen Mockup and add a Text Edit e.g. Password Text Edit<\/h3>\n
<\/div>\n
Step 7. A confirmation message displays<\/h3>\n
<\/div>\n
Specify value for the custom property and save the mockup<\/h3>\n
<\/div>\n<\/div>\n
See Also<\/h3>\n
\nUsing Screen Mockup Widgets<\/a><\/p>\n<\/div>\n<\/div>\n