WebPart Design Page Overview
The WebPart Design Page is comprised of different sections.
1) Toolbox, Datasource, Entities/Tree View
The left panel contains tabs at the bottom to switch between a few useful tools to be used on the WebPart Canvas. The toolbox will the most useful to begin with because you can drag Containers, Datasources, and Web Controls out of the toolbox to use on your WebPart Canvas.
Once a Datasource is created, you can view it in the Datasource tab. This is an expanded look at your datasource. You can expand the nodes within the datasource and drag a desired node to the WebPart canvas. This creates a WebControl based on that data source value.
This is an alternate view of the WebPart canvas. It shows sections on the WebPart in a tree view to understand how sections are nested within others. This is useful for very large WebParts that may be difficult to see in the WebPart Canvas screen.
2) WebPart Canvas
This is the main area of the WebPart Design Page. This is the working area of the WebPart. It represents all aspects of the WebPart you are building visually. There is an area for the Datasources and the WebPart area which contains all sections and Web Controls.
3) Property Editor
Any item selected (WebPart, Section, Web Control) has associated properties. This Property editor allows you to view the properties of whatever is selected and edit them.
4) Tab Selector
The developer on the WebPart Design Page can have multiple windows opened. This is maintained by the tabs at the top of the page. Three tabs will always be open: WebPart/View, Test, and Log.
Test allows the developer to see what the WebPart will look like once displayed on the WebPage. This will generate logs so it can be also used for debugging the process logic.
Log allows the developer to see the logs for the WebPart. This is the same as the Application Logs screen, but it is automatically filtered to only show the results from the WebPart that is open.
Left Panel: Toolbox, Datasource, Entities/Tree View
The toolbox contains every element for a web part you will need. You can simply drag and drop anything from this list into a web part.
- Containers - Sections, List Sections and Tab Sections are three different type of containers you can have in a webpart. A webpart can only contain containers and containers can contain fields. You cannot add web fields directly to a webpart. So every time you design a WebPart, your first task will be to add a container.
- Datasources can be added to your WebPart as a source of data for certain controls. These can be used to populate fields like a drop-down list or containers like a list section which appears like a grid on the page. Any time data displays on the WebPart, the data must come from a source. While the data could be hard coded to always display the same static text, it will most of the time come from a WebPart Datasource.
- Web Controls - These are all the fields you wish to contain in your WebPart. These include: RadioButton, Button, CheckBox, List, etc.
You can view the Datasources in the current web part here. When you create a new WebPart, this view will be blank, because your WebPart is blank. As you add datasources, if you look in this tab, you will be able to see it added in this list.
If the datasource is already set up, The entire Datasource will be represented in a tree view so individual nodes can be dragged onto the WebPart canvas and in a section to create a Web Control.
Creating Web Controls
If the datasource is already set up, you can drag fields from the datasource into a WebPart section. A window will open to ask you to select a particular Web Control (text box, label, etc) and when placed on the canvas, the text/data property of the control will be auto-filled with the node of the datasource that was chosen.
Creating List Sections
List sections can also be created from a selected Datasource. Drag a complete datasource node into the WebPart itself. A window will pop up to prompt the user for the fields and Web Controls to choose.
Entities/Tree View Tab
This is an alternate view of the WebPart Canvas. You can view all of the fields and sections associated with the current web part. When you create a new WebPart, this view will be blank, because your WebPart is blank. As you add sections and fields within those sections, this panel will show a tree view of the entities (Sections, Fields) as they exist in your WebPart. This can be helpful because it might be difficult to see that Fields or Sections exist inside of a container Section. This panel displays it in a tree view, so you can see the hierarchy very easily. You can click a field or section in this list to view it's properties in the right panel of the WebPart Design Page.
Middle: WebPart Canvas
The Web Part Canvas is a visual representation of the web part you're creating. Clicking any node in the canvas will populate the node's properties in the property editor.
There are three parts to the WebPart Canvas:
- Web Part Editor (Dark Gray background)
- This is the web part itself. It can contain a combination of sections and fields in any format desired.
- Datasource Section (White background)
- This shows all Datasources attached to the web part. Double clicking a datasource node will open the Data source canvas (which we will learn about later). You can also drag a datasource from this section into the web part to create a list section of fields from that datasource.
- WebPart Toolbar (Top of canvas)
- From here you can perform actions on the web part such as: Build, Rebuild, and Clear Build Data.
Right Panel: Properties Section
The Right section is the Properties Section. You can click any object (webpart, section or web field) on the canvas and view/set its properties in this panel. Properties are categorized and vary between different fields and sections. The properties entered help further configure the fields and sections to be unique and give the desired functionality.
The top tabs display different areas you have open. If you have double-clicked into a datasource, it opens a tab to show the datasource process canvas. You can then click back and forth between the tabs to return to the WebPart Canvas. Three tabs will always remain open:
This is the default view of the WebPart Design Page It contains the left (toolbox), middle (WebPart canvas), and right (properties) panels of the page.
This loads your webpart with all of your changes so far. It won’t have the CSS applied from your website, but it is a good tool to use when planning your webpart to get an idea of how it will look on the page.
Loading the WebPart will also generate logs, so it can be used to load the page and test the logic in a process.
EASYProcess does this by placing your tab in a WebPage created specifically to test. This is useful if you want to see how your WebPart is going to look before creating a WebPage to house the WebPart.
This shows the logs from the webpart. Each time the webpart is loaded on a page, it can generate logs (if logs are turned on) and they can be viewed here. This can be very helpful when troubleshooting your logic because you can see how many times things loaded, what order they loaded in, and what they were doing.
This is the same logs screen that shows when accessing Application logs. The only difference is that the log records shown will be filtered to only show the current WebPart logs. This will make a lot of the log object filter options not necessary.
For more information on this page, see the explanation of Application Logs.