Using Components

Add components to a page by one of two methods:

• Double-click inside the box labeled Drag components or assets here 
• Drag and drop (see the illustration below) the component from the Sidekick onto the page. When the component is over an editable area (indicated by a green circle with a checkmark) release the mouse button. The component is added to the page. You may place components above, below or between existing components as indicated by the green circle and checkmark.

When components are first added to a page, they are represented in two different ways depending on their type:

• Icon Components: Most of the basic components are represented with an icon (see diagram below).
• Menu Bar Components: A small blue menu bar, or "handle," appears in feature components such as Column Control, Form Container and Related Content Container.

Components may be copied or cut from one position on your page and pasted to another. They may also be moved from one page to another.

1. Select the desired component by moving the cursor over the component and clicking inside it; the component will now be highlighted by an orange box.
2. Right-click (CTRL-click for Apple users) on the component and choose Copy from the pop-up menu to copy it. If you use Cut to move a component, the component will not disappear from its original location until it has been pasted in its new location.
3. Navigate to another section of the page or to another page on the website.
4. Right-click (CTRL-click for Apple users) on the component just below where the pasted component should appear and choose Paste from the pop-up menu.

It is possible to copy components from your source page to another ('target') page, provided (1) that you stay within the same browser window, and (2), that the content finder is loaded -- look for "cf#/" in your browser's location bar;
https://ubcms-author.buffalo.edu/cf#/content/www/provost/admin-units.html

(1) One way to do this is if the the target page is directly linked from the source page. Clicking the link to the target page loads that page in the same window (or tab, if your browser has several windows open). If the pages are not linked, you can paste the URL of the target page into the location bar, so it loads in the same window. Or you could even temporarily add a link on your source page to the target page and then remove the link after you have copied over the content. If the target page does not yet exist, you will need to build it before you start this procedure.

(2) The content finder must be loaded ("cf#/" must be in the URL in your browser's location bar); e.g.
https://ubcms-author.buffalo.edu/cf#/content/www/provost/admin-units.html
You can type it in and reload the page if it is not displayed.

Copying the component between the two pages is now as simple as copying to another part of the same page:

1. Select the component you want on your source page, right click the mouse and then select ‘copy.’
2. Click on a link to your target page.
3. On your target page, you should be able to right click and select ‘paste.’
   

The copied component will appear ABOVE where you position your mouse. If you accidentally paste the content in the wrong spot, you can drag it to the desired location, or use right click to cut and then paste.

It is also possible to move a component in this manner (cut and paste), but this is not recommended. If the transfer does not proceed as desired, you may accidentally lose your content.

Icon Components

1. Right-click (CTRL-click for Apple users) on the component and choose Delete from the pop-up menu.
2. Confirm the deletion by clicking Yes in the warning dialog box.

Menu Bar Components

1. Click Delete in the top blue bar.
   
2. Confirm the deletion by clicking Yes in the warning dialog box.

Should you realize you deleted or changed a component by mistake, the built-in Undo/Redo feature may be helpful.