---
title: Developing wireframe components
related:
- https://docs.kentico.com/k81/developing-websites/wireframing.md
- https://docs.kentico.com/k81/custom-development/developing-web-parts.md
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
All wireframe components are defined as [web parts](https://docs.kentico.com/k81/custom-development/developing-web-parts.md) of a specific type. The system allows you to develop new web parts and modify existing ones, so you can create any custom wireframing tools that your website requires.
The following example demonstrates how to create a custom wireframe component representing a button with a resizable width. You can develop more complex components by following the same basic principles. For additional inspiration, you can inspect the code of the default wireframe web parts found in the **\~/CMSWebParts/Wireframes** folder of your web project.
## Registering the new wireframe web part
1. Open the **Web parts** application.
2. Expand the **Wireframe** category at the bottom of the catalog tree and select the **Forms** sub-category.
3. Click **New web part** above the tree.
4. Choose **Create a new web part** and enter the following values:
- **Display name**: Resizable button
- **File path**: \~/CMSWebParts/Wireframe/Forms/CustomResizableButton.ascx
- **Generate the code files**: yes (checked)
5. Click **Save**.
6. On the new web part's **General** tab, set the following options:
- **Type**: Wireframe (all web parts that you wish to use as wireframe components must use this type)
- **Skip initial configuration**: yes(allows users to add the web part to wireframe grids without having to configure its properties)
7. Click **Save**.
8. Switch to the **Properties** tab.
9. Click **New field** and set the following values:
- **Field name**: Text
- **Field type**: Text
- **Field size**: 100
- **Default value**: OK
- **Field caption**: Button caption
- **Form control**: Text box
> **Info:** The purpose of the _Text_ property is to store the value of the button's text caption.
10. Click **Save**.
11. Switch to the **CSS** tab and add the following class definition:
```css
.WireframeResizableButton
{
border: solid 3px #000;
padding: 5px 15px 5px 15px;
display: block;
overflow: hidden;
text-align: center;
min-width: 50px;
}
```
> **Info:** The _WireframeResizableButton_ class will be used to style the button component.
12. Click **Save**.
## Implementing the component's functionality
1. Open your web project in Visual Studio.
2. Navigate to the **CMSWebParts/Wireframe/Forms** folder.
- The folder contains the _CustomResizableButton.ascx_ file and its _ascx.cs_ code behind, which were generated by the system when you created the web part.
3. Edit _CustomResizableButton.ascx_ and add the following controls into the markup:
```html
```
These are two instances of server controls from the _CMS.PortalControls_ namespace that display content and provide the wireframe editing functionality.
| Control | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| EditableWebPartProperty | Renders a text value in a way similar to a standard literal control. Users can edit the value by double-clicking the text in the wireframe.
The **PropertyName** specifies the name of the web part property that is affected by the editing. Notice that the value matches the _Column name_ of the web part's only property (Text).
Through the **Type** property, you can choose what kind of editing interface the control displays.The appearance of the control in the wireframe grid is typically defined using CSS classes, such as the _WireframeResizableButton_ class in the current example. |
| WebPartResizer | Adds a resizer that allows users to easily change the dimensions of the component directly in the wireframe.
The **HorizontalOnly** property is set to _true_ in the example, so the component only supports width resizing in this case. |
Other available control options:
| EditableWebPartImage | Displays image content. Users can select the image through a dialog by double-clicking the current output. |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| EditableWebPartList | Represents a list of items formatted in a certain way, such as a menu or table. Users enter the value as text, with each item separated by a new line. |
| EditableWebPartColor | Displays an area in a specified color. Users can double-click the component to select the color. |
4. Edit the code behind file. Because the file was generated specifically for a web part, the control already inherits from the appropriate base class and also contains two default regions and several basic method definitions.
5. Add a **Text** property into the _Properties_ region, which handles the corresponding property of the web part object (defined in step 4). The overall code of the class should now match the following:
```csharp
public partial class CMSWebParts_Wireframe_Forms_CustomResizableButton : CMSAbstractWebPart
{
#region "Properties"
///
/// Accesses the value of the web part's Text property.
///
public string Text
{
get
{
return ValidationHelper.GetString(this.GetValue("Text"), "");
}
set
{
this.SetValue("Text", value);
}
}
#endregion
#region "Methods"
///
/// Content loaded event handler.
///
public override void OnContentLoaded()
{
base.OnContentLoaded();
SetupControl();
}
///
/// Initializes the control properties.
///
protected void SetupControl()
{
if (this.StopProcessing)
{
// Do not process
}
else
{
}
}
///
/// Reloads the control data.
///
public override void ReloadData()
{
base.ReloadData();
SetupControl();
}
#endregion
}
```
6. Implement the **SetupControl** method:
```csharp
///
/// Initializes the control properties.
///
protected void SetupControl()
{
if (StopProcessing)
{
// Do not process.
}
else
{
// Loads and assigns the button caption.
txtElem.Text = Text;
// Sets up width resizing.
string width = WebPartWidth;
if (!String.IsNullOrEmpty(width))
{
txtElem.Style += String.Format("width: {0};", width);
}
// Connects the button control to the resizer.
resElem.ResizedElementID = txtElem.ClientID;
}
}
```
This method ensures that the web part displays the component correctly according to its current configuration.
- First, it checks that processing (visibility) is enabled for the web part.
- If true, the method loads the button's caption text from the **Text** property and assigns it to the **EditableWebPartProperty** control.
- The method retrieves the width value of the button via the **WebPartWidth** property (inherited from the _CMSAbstractWebPart_ parent class) and adds it to the button's styles.
- The method binds the resizer to the button control through its _ClientID_.
> **Note:** **Handling the width and height of wireframe components**
>
> In this example, the width property is not included in the configuration dialog of the web part and is handled exclusively through the resizer.
>
> To register the width as a standard configuration option, define a property for the web part with _WebPartWidth_ as its column name.
>
> When creating components that also support vertical resizing, the **WebPartHeight** property (also inherited from the parent class) can be handled in the same way.
7. **Save** both files.
8. If your Kentico project was installed in the web application format, you must also **Build** the project.
The wireframe component is now fully functional and ready to be used.
## Result
Add the **Resizable button** component to any wireframe on the website (for example the _Examples -> Wireframe_ page on the sample Corporate Site). You can dynamically change the width of the button by dragging the arrow icon in its bottom right corner. Double‑clicking the button's caption allows you to edit the text.
