Now that we know how to move and arrange controls on the canvas, let's talk about editing them. In this video, we'll start building the individual pieces for our mock ups. We've already talked about the Property Inspector, and how you can change things like text size and colors. But we haven't yet talked about editing the contents of the controls that you've added to the canvas. Let's dive in. Some are very straightforward.

Editing the text and a button for example, double click or press enter to go into edit mode and type some text. Then hit enter or click outside the control when you're done. If you don't want to apply the Edit, press escape. This pattern for editing a single piece of text works for many of the basic controls, like label, radio button and others. Notice that some of the controls, especially those without any text, don't have any content that can be edited. Double clicking on them doesn't do anything.

A few other controls don't have text by default, but can display it if you had. The arrow and image controls are examples. Some other controls are a bit less straightforward, but you'll get the hang of them over time. The browser control for example, lets you edit the title and URL field. A good way to tell which parts of a control are editable to drag it from the UI library. By default, it will be in edit mode so you can immediately see what you can edit.

Now let's look at some controls that have more than one piece of text. Here we have a horizontal tap control. By default, it has four tabs labeled 1234 In the Property Inspector, you can show any of these tabs has selected. Now let's edit the tabs. Again, we'll double click on the control. Notice that there are commas separating the names of each of these tabs.

This is another common pattern you'll see in controls. Each comma as you would guess, signifies a new tab, you can rename the tabs and create as many tabs as you want. Notice that the selection list and the property inspector changes when you update the tabs. The same principle applies to many other horizontal controls to contain multiple names or links. Now let's talk about some vertical controls. Here's a simple list box.

Each line is a new item in the list. No need to use commas to separate the items Similar to the tab control, the property inspector will list the items and allow you to show what has selected. The combo box control, it's a little different, you can change the value shown in the box, but you can also add new lines to show the other options in the combo box. Then in the Property Inspector, you can show the combo boxes open or closed, as well as disabled. Some controls also support nested items. If you edit the default accordion control, you'll see two sub items under item two.

Changing the selection to item two, you can see them inside that tab. You can also show them as selected. Now let's talk about formatting text within a control. Let's say you want only some of the text and a control to be bold. balsamiq mockups uses certain characters as formatting tools within controls. The default text control shows most Have them.

For example, bold is indicated by asterisks, and brackets around a word will show it as a link, you can find the rest of the formatting codes and our documentation. Formatting text this way works in most of our controls, not just those that are blocks of text. Finally, a few other controls have some extra formatting shortcodes that are worth learning about. Here are the radio button group, tree pane and menu controls. Each of them have special formatting options. When they are first added to the canvas, you can see what you can do with them in edit mode.

The radio button group, for example, allows you to specify the state of the radio buttons in the group by using different characters inside the parentheses that indicate the radio button. You can also use some of the same text formatting codes that we learned earlier, such as dashes for disabled Text. The tree pane is similar in that you can use characters inside the brackets to indicate certain states. But it has more options too. You can use the letter F for folders and other symbols for arrows, files and spaces. Double click the menu control to learn how it works.

Lastly, the data grid or table control is very powerful once you get familiar with how it works. The default table has all the options shown. But let's start with a simpler version. As you can see, columns are separated by commas and each row is a new line. You can also paste data from a spreadsheet program like Excel or from a comma or tab separated file. To show a sort arrow in the header, add a V or carrot symbol just before the comma each column can have one or both or none as shown In the default table, you can also create radio and checkboxes inside tables with parentheses or brackets.

The last thing you can do with the data grid is specify column width. This is also shown in the default table. By adding an extra row at the bottom and curly brackets, you can specify width with relative or percentage based numbers. Let's say we want the first column to be twice as wide as the second and the third column to be as small as possible. You can learn more in our documentation. You can also specify alignment using the letters are L and C. For right, left and center.

This can be useful for aligning numbers and checkboxes for example. That's it for working with controls. Now let's move on to building our first real mock up