Design - Getting Started

 
 

It all started when...

Designing a system using WhiteSky Studio is a simple process that requires no programming expertise, no scripting, no database knowledge, no technical knowledge of any kind. The most advanced concepts are formulas (using an Excel like formula editor for doing things such as summing fields), and the consulting ability to take client requirements and translate those into a system design (See General Design Principles).

This article is written assuming you are starting from a blank system, that you have full administrator privileges to all required design functionality, and that the toolbar menu you have follows the same design as the default administrator toolbar.

In order to build a system there are 5 simple steps to follow, more advanced functionality can always be added on around that. For the purposes of this demonstration we will design and build Contacts and Companies related to each other via an Employees relationship. These are the steps we will follow:

  1. Create, and configure the options, for a Contact object.
  2. Design the groups of controls we would like against our Contact object.
  3. Create a Search Grid for a collection of Contacts.
  4. Configure the default screen for viewing/editing a Contact.
  5. Add access to Contacts onto the toolbar for our role.
  6. Repeat steps 1 – 5 for a Company object.
  7. Create controls on both a Company and Contacts to relate them both via an Employees relationship.

There is also a short video that demonstrates these concepts in our videos section. If you are already familiar with how to configure this in WhiteSky Studio, then there is also an Intermediate and Advanced section providing examples on queries, dashboards, advanced formulas, etc.

 

Step 1 – Create, and configure the options, for a Contact.

First, you’ll need to open the Object Types of the system. You should find this on Design -> Object Types on the menu, just click the Object Types  menu button to open it as a new tab.

 

 
1.png

 

You should find the menu option here, though it may differ if you are not using the default Admin role, and are using a modified one.
This will open up the list of Object Types in the system (See Object Types Design for further information). If you already have designed objects they will be listed here, if not this grid will be blank. Click the New  icon to create a new Object Type. Fill in the following details:

2.png

 

  • Object Type Name: Contact
  • Object Collection Name: Contacts
  • Icon: Select any existing Icon or a custom one.
  • Label Formula: ContactFirstName + ” ” + ContactLastName

We can leave the rest of the options untouched for now. See Object Type Design for further information on creating a new object, and the Formulas section for explanation on the creating formulas.

You can now click Save  to save your changes to the new Contact Object.

Step 2 – Design the groups of controls we would like against our Contact object.

First we’ll need to open the Object Types of the system. Repeat the initial steps in Step 1 above, then select the Contact object from the list of Object Types and click the Design  button (See Object Types Design for further information) to begin designing the controls we would like against our Contact object.

This will open a list of Object Groups against our Contact object. If you have already designed groups then they will be listed here, if not this grid will be blank.

Click the New  icon to create a new Object Group.
Click the Details tab and fill in the following information:

 

3.png
  • Group Name: Main
  • Icon: Select any existing Icon or a custom one.

We can leave the rest of the options untouched for now. See Object Group Design for further information.

Next, click the Controls Design tab and click the New  button to create a new control. You should see the control appear and change in the preview window on the left hand side. Select a type of Textbox for the ControlType, and fill in the following details:

4.png
  • Control Type: Textbox
  • Label: First Name
  • Mnemonic: ContactFirstName
  • Description: The first name of the contact.

We can leave the rest of the options untouched for now. The mnemonic must be ContactFirstName, as this is the value we used in the formula for the label of a Contact object (See Step 1 above). If you need to use the value of a control in a formula then you must give that control a unique mnemonic and use the mnemonic in formulas – See Formulas for more details. See Controls Design for further information on designing controls.

Next we can add another Textbox control, give it a label of Middle Initials and change its width to 150. Finally we can create another Textbox control with a label of Last Name, as so:

5.png

 

  • Control Type: Textbox
  • Label: Last Name
  • Mnemonic: ContactLastName
  • Description: The last name of the contact.

Again, we can leave the rest of the controls blank. The mnemonic must be ContactLastName, as we also referred to such a control in the formula for the label of a Contact object (See Step 1 above).

You can now click Save  to save your changes to the new Object Group named Main against a Contact. If you wish to you can start adding more groups against the contact object to record things such as contact information, address, notes, etc.

Step 3 – Create a Search Grid for a collection of Contacts.

First, you’ll need to open the Grids Design of the system. You should find this on Design -> Grids Design on the menu, just click the Grids Design  menu button to open it as a new tab.

6.png

 

You should find the menu option here, though it may differ if you are not using the default Admin role, and are using a modified one. This will open up the list of Object Search Designs in the system (See Grid Designs for futher information). If you already have designed search grids they will be listed here, if not this grid will be blank. Click the New  icon to create a new Grid Design.

7.png

 

Enter a name of “Main Contacts”, as you can have as many different search grids for contacts as you like – this name will uniquely identify the one we want to use.

In the lower half of the pane, select a Object Type of “Contacts” and select the First Name, Middle Name and Last Name as columns. You can do this by clicking the New  button in the lower pane to create new columns, as so:

8.png

 

 

We can leave the rest of the options untouched for now. See Object Search Designs for further information on creating search grids.

You can now click Save  to save your changes to the new Search Grid.

Step 4 – Configure the default screen for viewing/editing a Contact.

First, you’ll need to open the Screen Layouts area of the system. You should find this on Design -> Screen Layouts on the menu, just click the Screen Layouts  menu button to open it as a new tab.

9.png

 

You should find the menu option here, though it may differ if you are not using the default Admin role, and are using a modified one.
This will open up the list of Screen Layouts for all the screens in the system (See Screen Layouts Design for further information).
We want to design the screen a user will see when they open a Contact. So you should see Contact listed in the possible screen layouts with the Icon you chose (See Step 1 above) next to it. Simply select the Contact in the tree view and click the New  button:

10.png

 

This will load a new empty tab that we can use to design the screen for the Contact. On the left hand side in your Tool Window (See General UI Overview) you will find the Layout Designer. We will use this to design our screen for a Contact. First click the New  button to add a new tab:

11.png

 

Then rename the layout to Contact, check the tick box for IS Default, change the Tab Name to Main, and in the list of Available Views you will see all the Object Groups that we created in Step 1. Next select the Main group from Available Views and click the Add View  button at the bottom. This will add the view from to the screen preview area in the tab on the right.

12.png

 

We can leave the rest of the options untouched for now. If you have more than one group you can add any remaining groups too this tab (or any new tabs you create), and rearrange the views exactly as you would like it to appear for the end user. For further information on how to design screens see Screen Layouts Design.
You can now click the Save  button in the Layout Designer Tool Window, to save your changes to the new Screen Layout.

Step 5 – Add access to Contacts onto the toolbar for our role.

First, you’ll need to open the Roles of the system. You should find this on Admin -> Roles on the menu, just click the Roles  menu button to open it as a new tab.

13.png

 

You should find the menu option here, though it may differ if you are not using the default Admin role, and are using a modified one.
This will open up the list of Roles in the system. We want to make changes to the role we are currently logged in as, which in this demonstration we are assuming is the Admin role. Select the Admin role (If you are logged in under a different role, then select that one instead) and click the Open  Role button. This should open the design for the Admin role and should default to the Menu tab, (if not then select the Menu tab). Here we can make changes to the menu options available for the role (See Role Menu Design for further information).

14.png

 

From this screen we can modify our menu. The bottom half of the screen shows a preview window of what the toolbar will look like, which currently should show the same toolbar as the one you actively have at the top of WhiteSky Studio. Simply Click on the Main menu group at the bottom and click the middle Add button to create a new group of menu buttons.

15.png

 

Rename the group to CRM. Then we want the button to open up our list of Contacts, we can select Contacts from the Item drop down list but that will just open a default grid for the user which just shows one column named Label. What would be much more useful is using our grid we created in Step 3, to do this select Custom Search: Main Contacts from the Items drop down. This will change the button Icon to your Contact Icon that you chose in Step 1, you can then rename the button to just say Contacts.
We can leave the rest of the options untouched for now. See Role Menu Design for further information on creating menus for roles.

You can now click Save  to save your changes to the toolbar for the role you’re logged in as.

If you now click Refresh All  button on the top right of WhiteSky Studio, the application will refresh and reload your current role and new menu. You can now click your new Contacts button to load an empty (as we haven’t created any Contacts yet) grid, that you designed in Step 3, like so:

16.png

 

 

From here, you can click the New  button to create a new Contact. It will open as a new tab, loading the screen you designed in Step 4, and once you’ve filled in the required details you can hit Save  to save your new Contact. This contact will now appear in your Contacts grid. From here you can filter, sort, query, export, import, search and edit all your contacts. For further information see Using Search Grids.

Step 6 – Repeat steps 1 – 5 for a Company object.  

          Step 6.1 – Create, and configure the options, for a Company object.
Repeat Step 1 from above, but this time enter the following different details for our new Company Object:

  • Object Type Name: Company

  • Object Collection Name: Companies

  • Icon: Select any existing Icon or a custom one.

  • Label Formula: CompanyName

  • Label Is Unique: True

        Step 6.2 – Design the groups of controls we would like against our Company object.
Repeat Step 2 from above, but this time only create one Textbox control for our new Main Group against our Company Object. The properties of the Textbox are as follows:

  • Control Type: Textbox

  • Label: Name

  • Mnemonic: CompanyName

  • Description: The unique name of this company.

  • Must contain unique value: True

       Step 6.3 – Create a Search Grid for a collection of Companies.
Repeat Step 3 from above, but this time name the search grid Main Companies, select the Company Object Type and only have one column in the grid – the Name control we created in Step 6.2.

       Step 6.4 – Configure the default screen for viewing/editing a Company.
Repeat Step 4 from above, but this time create a new Company layout, and just add one main tab, and add your Main Object Group you created against the Company Object in Step 6.2 into the preview area.

      Step 6.5 – Add access to Companies onto the toolbar for our role.
Repeat Step 5 from above, but this time just use the bottom Add button, not the middle one, to just add a new button next to Contacts. Select Custom Search: Main Companies as the object to use for that button and rename it to Companies.   You should now be able to open companies, from your new Companies button on the toolbar, and create/edit new companies.

      Step 7 – Create controls on both a Company and Contacts to relate them both via an Employees relationship.  

First we need to create a new group of controls against a contact for holding employer information. Like in Step 2 above, you need to create a new Object Group. On the Detail tab name it Employer, and then in the Controls Design tab create a new control of type SingleLookup with the following properties:

17.png

 

  • Control Type: SingleLookup
  • Label: Employer
  • Description: Company this contact is currently employed by.
  • Lookup Type: Company
  • Lookup Search Screen: Main Companies
  • Lookup Reverse Label: Employees

If you like you can also create a Textbox control for the contacts position within the company, and a Date control to hold the date they started working there.

We can leave the rest of the options untouched for now. See Controls Design for further information on designing controls.

You can now click Save  to save your changes to the Object Group named Employer against a Contact.

This has created one end of the relationship, and sometimes that is enough, however we would also like to edit this relationship from the Company as well.

Now we need to create a new group of controls against a company for holding a list of employees. Like in Step 2 above, you need to create a new Object Group. On the Detail tab name it Employees, and then in the Controls Design tab create a new control of type ListLookup with the following properties:

18.png

 

  • Group Style: Dock
  • Control Type: ListLookup
  • Label: Employees
  • Auto Height: True
  • Auto Width: True
  • Lookup Type: Contact
  • Lookup Search Screen: Main Contacts
  • Lookup Reverse Label: Employer

We can leave the rest of the options untouched for now. See Controls Design for further information on designing controls.

You can now click Save  to save your changes to the Object Group named Employees against a Company.

This has created the other end of the relationship, however we need to tell the system that the Employees relationship on a Company is the same thing as the Employer relationship on a Contact – they are two sides of the same relationship. We can only do this after we have saved both controls, but if we go back to the Employees control we will find there is a new option:

  • Lookup Relationship Control: Employer

Once we have selected the opposite control on the Contact as the same as this control, then the system has now linked the two. Whenever we add an Employer on a Contact, the system will automatically show that as an Employee against the Company. You can now click Save  to save your changes to the Object Group named Employees against a Company for the last time.

Now we need to add our 2 new views to the Contact and Company screen.

To begin with the Contact. Go back to Screen Layouts Design, as in Step 2, but instead of creating a new one just open up the Contact and open your existing Contact Layout that you designed earlier in Step 2.

You will now find in the list of available views, that there is a new view name Employer. Add this view to the Contact screen (see Screen Layout Design on how to move and position views), and then click the Save  button on the Layout Designer.

Next open the existing Company Layout. In the list of available views you will see 2 new views, not just the one you created. The one you created, “Employees”, is there; as is “Employees: Main Contacts”. This is because the system allows you to add contacts to the Employees control using the list control, or you can use a search grid to add/remove/edit employees from. The search grid is the one we’ll use so first click Add Tab and name it Employees, then select the “Employees: Main Contacts” view and add it to your new tab. You can then rename it to just say Employees. Finally click the Save  button on the Layout Designer.

If you now click Refresh All  button on the top right of WhiteSky Studio, when you open (or create a new) Company you can go to the Contacts tab and select existing (or add new) Contacts to the list of employees. As we selected a Search Grid, this means we can also edit the Contacts live within the Employees grid too.

Provided you’ve followed this article correctly, you have now very easily designed Contacts & Companies, created a UI for them, created search grids, configured access to them for a role and setup a relationship between both objects. This should give you a very high level overview of the powerful capabilities of WhiteSky Studio. Naturally there are a far greater set of functions and controls that permit an almost endless variety of configuration. To learn more please follow the Intermediate and Advanced articles.