View provide the base structure that wraps the admin and frontend of the page. With Joobi, you can modify the views of any Joobi page ( admin and front-end area) without writing a piece of code. Even better, you can access the core software views and safely customize them.

Note: You can add a new "Element" or edit a core one and can safely update without being overwritten.

What is an Element?

An element is the what page is composed of. For example if the page is a list of items, an element in that case will be a column.
If the page is a form, then an element will be a field of that form

An element usually has a title, tooltips and a content.

  • Title define the element
  • Tooltips give information on how to use or populate the element
  • Content will be the value or the place to enter a value

What you can modify for an element

  • You can edit an existing Element Type (Tab Container to Pane Container)
  • You can add Columns if you want to show your elements in columns in the frontend
  • You can disable a View element
  • You can change the access to an Element
  • You can re-order the elements
  • You can re-assign the Parent of an Element
  • You can disable the Element Title and Area

You can add:

  • Add Tab Container
  • Pane Container
  • Collapsable Pane Container
  • Widget Box
  • Create Column
  • Create Row
  • Div Container

Important

Modifications made to a view are NOT overwritten during update. Therefore you can freely customize the layout, look and feel of the views and safely keep you apps up to date.

How to spot the correct View name

Starting jApps 3.5, Joobi implemented a new option called "Debug Configuration and Show Page Details". This is enabled by default and is visible to site administrators. If you want to see the debug details from your site front-end, you need to login as site administrator.

  • From you admin panel, navigate to jApps >> Preferences >> Views
  • From the Views tab, locate "Show Page Details and Show Configuration" under Direct Editing
  • Every-time you visit Joobi product pages, you will see the debug details at the bottom of each pages. You should be able to see the name of the "View" under "View Details".
  • Now go back to jApps >> Design >> Views and locate the view that you have seen from the "View Details".

view-debug-fe


1 column User Registration CHANGED to 2 Columns Registration

2column-registration

Product Edit view elements look like this:

product-elements-fe

View elements editing look like this:

 product-element-edit-fe