Views How To's

From Pengower
Jump to: navigation, search

Things you need to know in creating different Views for your application.


How to Create a Toolbar

A Toolbar is a set of different actions or commands that is constantly visible all throughout the application. This enables users to easily access certain actions or commands without the need to open the Menu.


Tutorial Video

Step by Step Guide

1. Go to the TOOLBARS tab and click on NEW TOOLBAR


Toolbar-hw1.jpg

Toolbar-hw2.jpg


2. Choose a name for your toolbar by filling out the TITLE field.


Toolbar-hw3.jpg


3. Click on the UPDATE button to save your toolbar.


Toolbar-hw4.jpg


4. Double click on the desired action you want the place on your toolbar. It should appear on the selected box. Click on the Update button to save your action.


Toolbar-hw5.jpg

Toolbar-hw6.jpg

Toolbar-hw7.jpg


5. Go to the VIEWS tab and create a new view by clicking on the NEW VIEW button (you can also open an existing view by opening it from the sidebar)


Toolbar-hw8.jpg


6. Let's create a new view by clicking on the NEW VIEW button.


Toolbar-hw9.jpg


7. Choose a name for your view by filling out the TITLE field.


Toolbar-hw10.jpg


8. Under layout, choose TOOLBAR ONLY APPLICATION. the Toolbar selection field should appear.


Toolbar-hw11.jpg


9. Choose the Toolbar you just created under the drop down.


Toolbar-hw12.jpg


10. Click on the UPDATE button to save your view.


Toolbar-hw13.jpg


You now have created a Toolbar and added it to an application view.

See Also

Interface Reference Guide

How to Create a Menu

How to Create an Item List

How to Create a Sidebar

How to Create a View

How to create a "list" action to list data type records

How to create an application logout action

How to create an "add" action to add or create data type records


How to Create an Item List

An Item list is a list of actions or data records that is usually found on the sidebar.

We use it to list actions, recent actions, and data record groups


Tutorial Video

Step by Step Guide

1. Go to the ITEM LIST tab and click on NEW ITEM LIST


Itemlist-hw1.jpg

Itemlist-hw2.jpg


2. Choose a name by filling out the TITLE field.


Itemlist-hw3.jpg


3. You can also put in a description for your Item list.


Itemlist-hw4.jpg


3. Under type, choose one of the options.


Itemlist-hw5.jpg


4. Click on the UPDATE button to save.


Itemlist-hw6.jpg


You know have created an item list. You can now add it to your sidebar and use it on your application.


See Also

Interface Reference Guide

How to Create a Menu

How to Create a Toolbar

How to Create a Sidebar

How to Create a View

How to create a "list" action to list data type records

How to create an application logout action

How to create an "add" action to add or create data type records

How to list recent actions to your sidebar


How to Create a Sidebar

A sidebar is a list of different actions or data records that is found at the left hand side of the application's view.


Tutorial Video

Step by Step Guide

1. Go to the SIDEBARS tab and click on NEW SIDEBAR


Sidebar-hw1.jpg


Sidebar-hw2.jpg


2. Choose a name for your sidebar by filling out the TITLE field.


Sidebar-hw3.jpg


3. Let's add an item to our sidebar. This will determine what our sidebar will contain. Under the options box, Let's choose an item list.


Sidebar-hw4.jpg


4. Select this item by clicking on it twice. You'll see it get added to the selected box.


Sidebar-hw5.jpg

Sidebar-hw6.jpg


5. Click on the UPDATE button to save your sidebar.


Sidebar-hw7.jpg


6. Go to the VIEWS tab and open an application view.


Sidebar-hw8.jpg


Sidebar-hw9.jpg


7. Under layout, choose STANDARD APPLICATION LAYOUT.


Sidebar-hw10a.jpg


8. Let us choose a menu, toolbar and a sidebar for your application view.


Sidebar-hw11.jpg


9. Click on the UPDATE button to save your view.


Sidebar-hw12.jpg


You now have created a sidebar and added it to your application view.

See Also

Interface Reference Guide

How to list recent actions to your sidebar

How to Create a Menu

How to Create a Toolbar

How to Create an Item List

How to Create a View


How to Create a Menu

Tutorial Video


Step by Step Guide

1. Go to the Menus tab and click on the New Menu button.


Menu-hw1.jpg

Menu-hw2.jpg


2. Choose a name for your Menu by filling out the TITLE field.


Menu-hw3.jpg


3. Click on the UPDATE button to save your Menu.


Menu-hw4.jpg


4. Go to the Heading field and put in a name to identify the actions you want to place on the menu.


Menu-hw5.jpg


5. Click on the Next Item button to add the header to your Menu.


Menu-hw6.jpg


Menu-hw7.jpg


6. Choose an action from the actions box.


Menu-hw8.jpg


7. Then click on the Child Item button.


Menu-hw9.jpg

Menu-hw10.jpg


7. Click on the UPDATE button to save your Menu.


Menu-hw11.jpg


You now have created a Menu.

See Also

Interface Reference Guide

How to Create a Toolbar

How to Create an Item List

How to Create a Sidebar

How to Create a View

How to create a "list" action to list data type records

How to create an application logout action

How to create an "add" action to add or create data type records


How to Create a View

A view or an application view brings together all the different elements of the Interface and places them in a particular application Layout as well as defining particular style variables such as colors and fonts etc.


Tutorial Video

Step by Step Guide

1. Go to the VIEWS tab and click on the NEW VIEW button.


View-hw1.jpg

View-hw2.jpg


2. Choose a name for your view by filling out the TITLE field.


View-hw3.jpg


3. Choose an application layout.


View-hw3a.jpg


4. Click on the UPDATE button to save your view.


View-hw4.jpg

View-hw5.jpg


You now have created an application view.


See Also

Interface Reference Guide

How to Set a Top Image

How to Edit a View's Style

How to make a View secure

How to Set a Log In Image

How to open your Application

How to Set a View's Start Action

How to Set a View's Start Action

Start action is used when you want to assign an application view a certain command/action to automatically be carried out whenever it is visited.


Tutorial Video

Step by Step Guide

1. Go to the VIEWS tab and select a view you have previously created.


Start action how to 1.jpg

Start action how to 2.jpg


2. Under the IS SECURE checkbox, you can see the start action drop down box. Choose an action you want this view to start with.


Start action how to 3.jpg


3. Once you have selected an action, click on the UPDATE button to save.


Start action how to 4.jpg


4. Click on the UPDATE APPLICATION button again and open your application.


Start action how to 5.jpg


You now have set an application view's start action.

See Also

Interface Reference Guide

How to Create a View

How to Set a Top Image

How to Edit a View's Style

How to make a View secure

How to Set a Log In Image

How to open your Application

How to create a Standard Action

How to create an Action button


How to Set a Top Image

Setting a top image to your application view enables you to put a graphical image such as a banner or a poster.


Tutorial Video

EmbedVideo is missing a required parameter.


Step by Step Guide

1. Go to the VIEWS tab then select a view you have previously created.

Top image how to 1.jpg

Top image how to 2.jpg


2. Click on the CREATE TOP IMAGE button. A pop up window should appear.


Top image how to 3.jpg


3. Choose a background color.


Top image how to 4.jpg


4. Choose a left side image to appear at the top left of your application.

Note: Use images that are in PNG file format.


Top image how to 5.jpg


5. Choose a right side image to appear at the top right of your application.

Note: Use images that are in PNG file format.


Top image how to 6.jpg


6. Click on the UPDATE button to save your top image settings.


Top image how to 7.jpg


7. Go to the LAYOUT options and Select an application layout that enables a Top Image.


Top image how to 9.jpg


9. Click on the UPDATE button and UPDATE APPLICATION button to save.


Top image how to 10.jpg

Top image how to 11.jpg


You now have created a top image for your application.

See Also

How to Create a View

How to Edit a View's Style

How to Set a Log In Image

How to open your Application

Interface Reference Guide


How to Edit a View's Style

You can edit your application's view style using the builder. This gives you the ability to change the overall theme of your application. You can also change the background color of your toolbar, menu and footer.


Tutorial Video

Step by Step Guide

1. Go to the VIEWS tab, then click on a view that you have previously created.


View style edit how to 1.jpg

View style edit how to 2.jpg


2. Click on the EDIT STYLE button just below the Start action field. A new window tab should appear. This is where we can style our view.


View style edit how to 3.jpg


3. You can choose different Styling Options from Basic to Expert. Just for this purposes, let's click on the BASIC STYLING OPTION.


View style edit how to 4.jpg


4. Let's choose a font style.


View style edit how to 5.jpg


4. Then, Let's choose a color for the top, left side, middle and the footer.


View style edit how to 6.jpg

View style edit how to 7.jpg

View style edit how to 8.jpg

View style edit how to 9.jpg


5. You can click on the preview button to quickly view the changes we have just made.


View style edit how to 9a.jpg


6. Once you are done editing, click on the UPDATE button. When you launch your application view, you should now see its new style.


View style edit how to 10.jpg


You now have learned how to edit or change your application view's style.

See Also

Interface Reference Guide

How to Create a View

How to Set a Top Image

How to make a View secure

How to Set a Log In Image

How to open your Application


How to make a View secure

Making a view secure means that a username and password is needed to access your application view.


Tutorial Video

Step by Step Guide

1. Go to the VIEWS tab and open a previously created view.

Secure view how to 1.jpg

Secure view how to 2.jpg


2. Tick on the IS SECURE checkbox. Enabling this would make our application view require a username and password whenever it is accessed.


Secure view how to 3.jpg


3. Click on the UPDATE button and UPDATE APPLICATION button.


Secure view how to 4.jpg


Secure view how to 5.jpg


4. Launch your application by clicking on the LAUNCH VIEW button. You should now be redirected to a login page.


Secure view how to 6.jpg


You now have made your view secure.


See Also

Interface Reference Guide

How to Create a View

How to Set a Top Image

How to Set a Log In Image

How to open your Application

How to set which Views are available for a particular User Type

How to set User Access - edit, read only, hide

How to Create User Types

How to Create Users


How to Set a Log In Image

A log in image is the graphic image that can be seen by users when they login to your application. You can customize its look by uploading an image of your own selection.


Tutorial Video


Step by Step Guide

1. Go to the VIEWS tab and open an application view you have previously created.


Login image how to 1.jpg

Login image how to 2.jpg


2. Click on the LOGIN IMAGE button found just below the launch view button. A new pop up window should appear.


Login image how to 3.jpg


3. Choose an image that you want to place at the login page.


Login image how to 4.jpg


4. Once you have chosen an image, click on the UPDATE button to save.


Login image how to 5.jpg


5. Click on the UPDATE button and the UPDATE APPLICATION button.


Login image how to 6.jpg

Login image how to 7.jpg


6. Click on the launch view button to launch our application. You can now see the login image we just created.

Login image how to 8.jpg

You now have set a login image for your application.

See Also

Interface Reference Guide

How to Create a View

How to Set a Top Image

How to Edit a View's Style

How to make a View secure

How to open your Application


How to list recent actions to your sidebar

Recent actions lists all recent actions done on the application which can be easily accessed from the sidebar.


Tutorial Video

Step by Step Guide

1. Go to the ITEM LIST tab and click on NEW ITEM LIST


Itemlist-hw1.jpg

Itemlist-hw2.jpg


2. Choose a name for it by filling out the TITLE field.


Itemlist-hw3.jpg


3. Under type, choose RECENT ITEMS.


Itemlist-hw4.jpg


4. Click on the UPDATE button to save. You know have created an item list.


Itemlist-hw5.jpg


5. Go to the sidebar tab and open an existing sidebar.


Itemlist-hw6.jpg

Itemlist-hw7.jpg


6. Once you have opened a sidebar, you can now see the item list we just created under the Item list Options.


Itemlist-hw8.jpg


7. Select an item list by clicking on the MOVE RIGHT button. You should see it get added to the selected box.


Itemlist-hw9.jpg

Itemlist-hw10.jpg

Itemlist-hw11.jpg


8. Click on the UPDATE button to save your sidebar.


Itemlist-hw12.jpg


See Also

Interface Reference Guide

How to Create a View

How to Create a Sidebar

How to create a Standard Action

How to create an Action button

How to Create an Item List

How to open your Application