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.
5) HTML Override
EASYProcess allows you to modify the html of a WebPart. When the WebPart is shown on the page, it will instead use the developer defined HTML rather than the sections and web controls on the WebPart Canvas. To make your html looks good, html developers always use images, js, css, fonts.