enable-a-control-for-design-time-usage-6888c17.md

Enable a Control for Design-Time Usage

To enable a control for design-time usage, follow the steps described here.

Prerequisites

The library containing the control needs to be enabled for design-time usage. See Enable a Library for Design-Time Usage.

Context

All design-time metadata must be contained in one special folder within the library. The location is <lib_namespace>/designtime. If there are sub-namespaces in the library, the sub-namespace needs to be present within the designtime folder.

For example, if you have a sap.m.semantic.SemanticPage control, you need a sap/m/designtime/semantic/SemanticPage.designtime.js file.

Procedure

1. Move all existing <control>.designtime.js files into the designtime folder.

   If the library contains subfolders, repeat their structure within the designtime folder.

2. In the designtime folder, in the subfolder for your control, create the following files:

   File	Description
   <control>.designtime.js	File containing the design-time metadata. For more information, see Providing Design-Time Metadata.
   <control>.icon.(resolution).png	Icons for controls in different resolutions (small, medium, large)
   <control>.icon.svg	Icon for controls that are scalable to different resolutions

3. In the <control>.js file, in the metadata of the control, set the designtime property to the name of the module.

   Here's an example:

   Sample Code:

   Button.js

   var Button = Control.extend("<lib_namespace>.Button",
   {
       metadata: {
           ...
           aggregations: {...},
           properties : {...},
           designtime : "<lib_namespace>/designtime/Button.designtime"
       }
   });