BLOG

NEXT STEPS

Archive for the ‘OFBiz Tutorials’ Category

OFBiz Tutorial-Using CMS for Static Web Pages

Tuesday, June 29th, 2010

In my last post regarding usage of CMS for Front End application we saw how to setup simple static content page using contentId in OFBiz screen definition. You just need to setup the content data and controller entry to make it work.

Now we will see how to setup CMS driven static page for a website. Following four steps are going to be the magic:

  • WebSite Publish Point Setup
  • Decorator Content Data Setup
  • Static Content Data Setup
  • CMS request in Controller

Assumption: A component is already setup; here the name of the component is “cmsdemo” . If you have not done that already please go through my last post OFBiz tutorial on CMS usage for front end application.

Setting up Website Publish Point

Its easy to setup Website publish point in data. Below is an example of  how to do this in the content data file, in this case the name of the file is CmsDemoData.xml:

?View Code LANGUAGE
1
2
3
<Content contentId="root" contentTypeId="WEB_SITE_PUB_PT" contentName="Webstore Site Publish Point" description="Root publish point for CMS website"/>
<WebSite webSiteId="CmsWebSite" siteName="CMS Web Site"/>
<WebSiteContent webSiteId="CmsWebSite" contentId="root" webSiteContentTypeId="PUBLISH_POINT" fromDate="2010-01-01 00:00:00"/>

Also make sure you have webSiteId entry in web.xml of your application as shown below:

?View Code LANGUAGE
1
2
3
4
5
<context-param>
    <param-name>webSiteId</param-name>
    <param-value>CmsWebSite</param-value>
    <description>A unique ID used to look up the WebSite entity</description>
</context-param>

Setting CMS Site Main Decorator

Content Data

Content data setup refers to the decorator screen for static pages:

?View Code LANGUAGE
1
2
3
4
<DataResource dataResourceId="CMS_ST_DEC" dataResourceTypeId="URL_RESOURCE" dataTemplateTypeId="SCREEN_COMBINED"
objectInfo="component://cmsdemo/widget/CommonScreens.xml#cms-main-decorator"/>
<Content contentId="CMS_ST_DEC" contentTypeId="DECORATOR" contentName="CMS Site Main Decorator" dataResourceId="CMS_ST_DEC"/>
<ContentPurpose contentId="CMS_ST_DEC" contentPurposeTypeId="SECTION"/>

Screens

Setup the main decorator for your site as shown below, it can have more resources included, but right now it has very little information:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<screen name="main-decorator">
    <section>
        <actions>
            <property-map resource="CmsDemoUiLabels" map-name="uiLabelMap" global="true"/>
            <property-map resource="CommonUiLabels" map-name="uiLabelMap" global="true"/>
 
            <set field="layoutSettings.companyName" from-field="uiLabelMap.CmsDemoCompanyName" global="true"/>
            <set field="layoutSettings.companySubtitle" from-field="uiLabelMap.CmsDemoCompanySubtitle" global="true"/>
 
            <set field="activeApp" value="cmsdemo" global="true"/>
            <set field="applicationMenuName" value="MainAppBar" global="true"/>
            <set field="applicationMenuLocation" value="component://cmsdemo/widget/CmsDemoMenus.xml" global="true"/>
            <set field="applicationTitle" value="${uiLabelMap.CmsDemoApplication}" global="true"/>
        </actions>
        <widgets>
            <include-screen name="GlobalDecorator" location="component://common/widget/CommonScreens.xml"/>
        </widgets>
    </section>
</screen>

Now you need to setup the cms-main-decorator screen as shown in the code below which will include the above given main decorator of the site.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<screen name="cms-main-decorator">
    <section>
        <actions></actions>
        <widgets>
            <decorator-screen name="main-decorator" location="${parameters.mainDecoratorLocation}">
                <decorator-section name="body">
                    <section>
                        <condition>
                            <not><if-empty field="decoratedContent"/></not>
                        </condition>
                        <widgets>
                            <platform-specific>
                                <html>
                                    <html-template location="component://cmsdemo/webapp/cmsdemo/cms/DecoratedContent.ftl"/>
                                </html>
                            </platform-specific>
                        </widgets>
                        <fail-widgets><label text="Problem in loading static content"/></fail-widgets>
                    </section>
                </decorator-section>
            </decorator-screen>
        </widgets>
    </section>
</screen>

Decorated Content Freemarker Template

The DecoratedContent.ftl that you included in your cms-main-decorator, shown above, needs to be created at a given location by the same name with only the code as shown below, which is setup by the cms event and rendered:

?View Code LANGUAGE
1
${decoratedContent}

Setup Content Data for Static Page

Setup the content data line like the code below, which will use section-sub-content pattern and will use the decorator content that we created in an earlier step. Here I have given an example of how you can setup a privacy policy page for your site.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<DataResource dataResourceId="privacy" dataResourceTypeId="ELECTRONIC_TEXT" dataTemplateTypeId="FTL"/>
<ElectronicText dataResourceId="privacy">
    <textData>
        <![CDATA[
                <h1>Privacy Policy</h1>
                <h2><p>This is privacy policy page</p></h2>
                <p>Privacy Policy datailed text Goes here</p>
        ]]>
     </textData>
</ElectronicText>
<Content contentId="privacy" contentTypeId="DOCUMENT" contentName="CMS Site Privacy Page" dataResourceId="privacy" decoratorContentId="CMS_ST_DEC"/>
 
<ContentPurpose contentId="privacy" contentPurposeTypeId="SECTION"/>
<ContentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

Creating Controller Entry

Now create request entries in controller.xml to handle CMS page requests as shown below:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
<!-- default request; call into CMS \-->
<default-request request-uri="cms"/>
 
<request-map uri="cms">
    <event type="java" path="org.ofbiz.content.cms.CmsEvents" invoke="cms"/>
    <response name="success" type="none"/>
    <response name="error" type="view" value="error"/>
</request-map>

Provide links to CMS Page/Pages

Now its time to link CMS page with a menu on your web site as shown below:

1
<a href="<@ofbizUrl>cms/root/privacyPage</@ofbizUrl>">Privacy Policy</a>

You are done. Just load the data file which you created in CMS site data. Hit the url:http://localhost:8080/cmsdemo/control/cms/root/privacyPage which is based on ContentAssoc record we created earlier for privacy page:

?View Code LANGUAGE
1
<ContentAssoc contentId="root" contentIdTo="privacy" contentAssocTypeId="SUB_CONTENT" fromDate="2001-01-01 00:00:00" mapKey="privacyPage"/>

In the resultant screen you will see following page as per your data setup done:
FinalImage

This way you can add in as many pages as you want in a site which are static in nature and let  your client feel good when it comes to make any changes in content and they can just go in to Content Manager and can update the content easily without any code modification activity at any point of time.


Pranay

Pranay Pandey is Manager, Enterprise Software Development at HotWax Media (OFBiz Service Provider) and has been involved with the OFBiz project since 2007. He contributes actively to OFBiz, and also trains HotWax Media developers in OFBiz techniques and best practices.

OFBiz Tutorial- How To Use ECA’s To Extend Service Permission

Wednesday, June 16th, 2010

This OFBiz tutorial is the next part of our earlier tutorial “How to Setup User Permissions”.  See how using ECA’s can extend service permissions.

So far we have seen how to assign security permission to a user which will let the user access a particular application. The level of access to an application will depend on the permission(s) assigned to the user. You may want to allow the user to just view an application or maybe you want to allow them other possible permission options like creating new records, updating the existing records or deleting exiting records in a particular application.

You can also assign an admin permission to a user. This gives the user full access to an application so that the user can View, Create, Update and Delete records in a particular application.

Assigning a permission is not restricted to just one application, you can allow the user to access more then one application by assigning permissions related to other apps.

There are certain cases when a user has admin permission for an application but the user is not allowed to perform certain operation in the application. For example, if you want to view a product lookup screen in the “Asset Maint” application then you would need the permission of the Catalog application. The simplest option is to give the user all the required permissions. The downside of this approach is that this will also allow the user access to the Catalog application.

So in this case if you want the user to have access only to the “Asset Maint” app then you can do this by defining ECA (Event Condition Access) rules which will extend the permission of the other applications while still not allowing the user to access these application(s) other than “Asset Maint.”

The rule can be defined in a file under the sevicedef folder in the component directory tree as following.

OFBiz Tutorial Permissions-2-1a

This also requires the entry of this file in ofbiz-component.xml where secas.xml is the name of the above file.

OFBiz Tutorial Permissions-2-2a

Whenever the user tries to perform any catalog related operation in the “Asset Maint” application, the catalogPermissionCheck service will run first. We know that the user does not have any explicit permission to the Catalog application hence the service will return hasPermission flag as false. Every permission service implements a generic service interface and hasPermission is one of the boolean attibute that is returned by the permission service. If it is false it means that the user does not have sufficient permission.

Since we want to override the permission we define a permission service in the “Asset Maint” component. This service will check whether the user has permission to access the “Asset Maint” component or not instead of checking for Catalog permission. If the service returns a true for the hasPermission flag (which it will if the user has “Asset Maint” permissions) it means the user can access the catalog related screens in “Asset Maint.”

The code for the permission service will look like this: (Click to expand image.)

 OFBiz Tutorial Permissions-2-4a

This way without explicitly assigning the catalog permissions the user will still be able to access the product lookup screen in the “Asset Maint” application.

Similar you can add more rules to the ECA file to override the OFBiz user permissions of other applications in the “Asset Maint” application.

- Vikas

Vikas Mayur is a dynamic OFBiz developer working for HotWax Media as a Director of Software Development in India. He works in web based application and ERP software using OFBiz, which is a top level project of Apache Software Foundation.

OFBiz Tutorial: How to Setup User Permissions

Thursday, May 20th, 2010

In OFBiz, every application has a base permission (except a few like ecommerce, ofbizwebsite etc.) and users should have at least base OFBiz permission view or base permission admin to login in the application. Sometime base permission may consist of more then one permission and in that case both are required to login/access the application.

The base permission is defined in the ofbiz-component.xml file of each component. If the base permission consists of more then one permission then they are separated by a comma.

Below is a code snippet taken from Asset Maint component ofbiz-component file.

OFBiz Tutorial Permissions 1

We will now learn how to setup permissions for a new user to gain access to a back-end application while using an Asset Maint component as an example throughout the tutorial.

Just a note that we will not focus on the internal details of this component and we will only visit a couple of screens to see whether we have setup correct permission levels for the user or not.

Step by Step Guide

Lets first create a new user in the system. Login to the party manager application with username: admin and password: ofbiz and click on Create New link located at the top of the main screen.

The screen will provide a variety of options to choose from. Click on Create New Person.

OFBiz Tutorial Permissions 2

Enter the required fields and save the form.

OFBiz Tutorial Permissions 3

This will take you to the user profile screen.

Our next step is to create a user login for the new user. Click on Create New link on User Name(s) screen in the right column on the profile page.

OFBiz Tutorial Permissions 4

Enter the details as below and save the form.

User Login Id: joe.will
Current Password: ofbiz
Current Password Verify: ofbiz

Now coming back to the profile screen you will see that the new user login has appeared under the User Name(s) screen in the right column on the profile page.

Now click on the Security Group link. This will present you with a screen where you can add a security group to the user account. Security Group is basically a set of permissions where permissions are classified as VIEW, CREATE, UPDATE and DELETE. An admin security group contains all of these permissions. Select Asset Maint Admin group from the drop-down list. The From Date field is optional and if user does not enter it then the application will use the system’s current timestamp for this field. Thru Date is also optional but if specified then the security group will be valid for the user till the thru date has passed. You can also assign multiple security groups at the same time to the user. Save this form.

Now you have granted sufficient permission to the user to access the Asset Maint application.

OFBiz Tutorial Permissions 5

Note: The admin user is available only if demo data is installed. If only seed data is installed then you have to create the admin user explicitly through the command line with an ant target defined in the build file which is present at the root of the project. Run command create-admin-user-login from the terminal and follow onscreen instructions to complete this wizard.

Testing User’s Permissions

Logout from the party manager application and then you can login to the Asset Maint application with the new user. The user should be able to login in to this application without any issues and this signifies that the user has permission to VIEW this application.

Lets try to check whether the user has permission to perform CREATE operation in the application. Go to the Fixed Assets tab and click on New Fixed Asset link. Fill in the basic details as shown in the screenshot and click on update button. The user should be able to create new fixed asset record. This signifies that user has permission to perform create operation in the application.

OFBiz Tutorial Permissions 6

Similar you can check whether the user has UPDATE or DELETE permissions by updating or removing the fixed asset record.

Lets try to login into any other application (for example catalog) with the same user to check whether the system permits the user to access an application other than Asset Maint. As it would be obvious from the screenshot below that the security permissions assigned to the user is just enough to login and access Asset Maint application and not any other application.

Similar you can try to login into any other application with the same user and you will see the same result.

ofbiz-tutorial-permissions7

So far we have learned the basics of security permission in OFBiz and how we can assign these permissions to the user.

Hope you will enjoy this!

- Vikas

Vikas Mayur is a dynamic OFBiz developer working for HotWax Media as a Director of Software Development in India. He works in web based application and ERP software using OFBiz, which is a top level project of Apache Software Foundation.

OFBiz Tutorial – Dependent Selects for Prototype

Friday, May 14th, 2010

In my first OFBiz Tutorial, I will show you how to make dependent select boxes using Prototype.

Building a web UI that lives up to the expectations of contemporary web designers is a challenge that every web developer faces. One that has remained a pain for a while is Dependent Select boxes. jQuery has a nice UI plugin that serves the purpose, but I cannot use it because I am married to Prototype javascript framework. I finally decided to implement one using Prototype. Dependent Select by Sliver, a UI plugin for jQuery is nice and simple, so I decided to base my component on the same concept.

Here it is, Dependent class allows you to link two select boxes in a parent child relationship. Any two select boxes can be linked. All you need to do is

  1. Parent select box options should have unique value of title attribute.
  2. On child select box, class attribute of options should be set to title of their parent.
  3. In javascript Create new Dependent object by passing child and parent select boxes.

Here is sample code. (Copied from Dependent Select by Silver website)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<select name="selectme" id="selectme">
    <option value="">-- select --</option>
    <option value="1" title="flowers">Flowers</option>
    <option value="2" title="animals">Animals</option>
</select>
 
<select name="selectme2" id="selectme2">
    <option value="">-- select --</option>
    <option value="1" class="flowers">Sunflower</option>
    <option value="2" class="flowers">Rose</option>
    <option value="3" class="animals">Dog</option>
    <option value="4" class="animals">Cat</option>
</select>
 
<script>
    new Dependent($('selectme2'),$('selectme'));
</script>

My goal was to build a dependent select box that will work in complex enterprise application scenarios. A nonstandard case is when the value of a parent select box value is change by background code. It gets even more complex when select boxes are disabled. Good news is, our Dependent class is smart enough to deal with these use scenarios.

In the process of solving these problems I learned about an interesting feature in Prototype, it has a AOP like ability. We can modify behavior of existing code by wraping function inside of a custom wrapper function. A Prototype function wrap is applied to the setValue function on Element to handle the background select value changes and disabled select box value change.

I have enjoyed building and using this new component. Download the component from its home on the web. I hope you will be able to find some interesting applications for it as well.

- Anil

Anil Patel is Chief Development Officer at HotWax Media as well as an OFBiz project committer, PMC member, and active community contributor. He also studies karate! Anil will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.

OFBiz Tutorial – How to setup the OFBiz Catalog Manager

Friday, May 7th, 2010

The OFBiz catalog manager is a powerful tool that provides various features like catalog and product management, promotion and price rules management.

In this tutorial we will learn how to setup a catalog and categories in OFBiz.

Terms

Before going further lets understand the basic terms.

Categories are a grouping of products to be presented to the user on an eCommerce storefront. A category can have other sub categories or products. A category can have a name, long description and an image. OFBiz supports a number of category types with each category type has its own business rules.

In this tutorial we will use a “Catalog” category type which represents a category with standard products.

Catalog – A catalog is a collection of products that are grouped in categories.

Hierarchy

In this tutorial we will first setup a catalog with a browse root category and a promotion category at level 1. The browse root category will have two more sub-categories underneath it.

The hierarchy of the catalog and categories will look like

Catalog -> Browse Root Category -> Sub – Category 1 -> Products

|                                          |

|                                          -> Sub – Category 2 -> Products

-> Promotion Category -> Products

We will not go beyond categories at this stage. The products are shown just for a complete understanding of the catalog, categories and products hierarchy. From the example it is evident that catalogs stays at the top level of the hierarchy and products at the bottom of the hierarchy. A catalog can essentially have as many categories as you would like. Similarly there can be sub-categories to the main categories.

Later in the tutorial we will give an overview of a side deep category widget and we will see how it helps to drill down across the categories.

Step by step guide

To create a catalog, go to the catalog administration main page (which is basically a main page of the catalog manager application) and click on the “Create New Catalog” link on this page.

In the Catalog form enter “Catalog Id”, “Catalog Name” and set “Use Quick Add” to “N”. Normally if a catalog Id is not entered, OFBiz will generate a unique sequence automatically.

As mentioned in the beginning of the tutorial that OFBiz supports a number of different category types. “Quick Add” is a special type of a category and it is basically used to add all the products to the cart at once. Use “Quick Add” field to “N” if you do not want to use the special quick add categories.

OFBiz Tutorial Categories 1

Now click on the Update button.

Wow, you have created your first catalog!

The new catalog will appear under the Browse Catalogs screen widget in the left bar of the screen.

OFBiz Tutorial Categories 2

We will now setup the categories under the HWM Catalog.

To create a category go back to the main page and click on “Create New Category” link on this page. On the edit category screen enter the following fields

  • Category Id – If not entered then a unique sequence is auto generated by OFBiz.
  • Category Name – Name of the category and is displayed on your eCommerce application.
  • Category type – Select Catalog (as discussed above)

OFBiz Tutorial Categories 3

Click on Update button and this will create your first category.

Now lets add this category to the catalog as shown in the hierarchy section above. Select the type as “Browse Root” and enter the from date and click on “Add” button. This will add Browse Root category (Name of the category) to the HWM Catalog (Name of the catalog).

OFBiz Tutorial Categories 4

Browse Root is parent of all browse categories. You have one Browse Root and multiple browse sub-categories. The important thing about the Browse Root (Only) catalog category type is that this category is not shown to the customer on the eCommerce site. Only sub-categories are shown.

Similarly add two categories namely: HWM_HATS (Hats) and HWM_TOPS (Tops). Also set Primary Parent Category to Browse Root Category.  This will signify that Browse Root category is the primary parent of both the categories but this will not setup the parent/child associations.

OFBiz Tutorial Categories 5

You need to explicitly set up the child categories (HWM_HATS and HWM_TOPS) to the parent category (HWM_BR_CAT) through Rollup tab as shown below.

OFBiz Tutorial Categories 6

Similarly you can set up the promotion category (not as a sub-category to the Browse Root, please refer the hierarchy diagram above). The only important point to remember is you have to select “Promotions (One)” catalog category type while adding this category to the catalog.

OFBiz Tutorial Categories 7

The side deep category is a very important widget present in the left navigation bar (Highlighted in red) and will show all the categories under the Browse Root category.

OFBiz Tutorial Categories 8

So far we have covered the basics of catalog manager. I hope you will enjoy this tutorial.

Just a brief note on the upcoming tutorial, we will go through following items

  • Product Store and how easily you can configure your product store
  • How to add catalog to the product store
  • How to create products
  • How to group the products in different categories

Vikas Mayur is a dynamic OFBiz developer working for HotWax Media as a Director of Software Development in India.  He works in web based application and ERP software using OFBiz, which is a top level project of Apache Software Foundation.