BLOG

NEXT STEPS

Archive for the ‘Apache OFBiz Development’ Category

OFBiz Tutorial: Quick Updates For CMS Pages In OFBiz

Thursday, July 22nd, 2010

In my earlier posts we saw how can we setup different static pages for a site developed in OFBiz.

Now we will see how your client or a developer can directly make changes to the static pages. For this we use Content Manger application.

The following are easy steps which can be communicated to clients once the static content data setup is completed by the development team and the site is live. Later these changes can be easily managed by client.

  1. Log into backend managment app :https://localhost:8443/content/control/mainOfbiz Tutorial Quick Cms Updates 1
  2. Select Content from the menuOfbiz Tutorial Quick Cms Updates 2
  3. In the search options put in the appropriate search criteria and click on the Find button eg. STORE_POLICIES. Results will show the list of contents matching the search criteriaOfbiz Tutorial Quick Cms Updates 3
  4. Click on the Page name under the Data Resource ID Column to edit. (in this case STORE_POLICIES)Ofbiz Tutorial Quick Cms Updates 4
  5. Click the TEXT or HTML link in the top to view/edit the Text/Html text based on skills to update them one is text editor and other one is html text editorOfbiz Tutorial Quick Cms Updates 5
  6. Edit the text and press the Update button and the page will update the text on the site.

This was one of the process that can be used to update static page contents on the site without requiring any changes in code base. So now whenever it comes to updating text on static pages when the site is live, these changes can be done easily with Content Manger application.
If you want to get more details related to OOTB OFBiz processes contact HotWax Media today.


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:Use Dependent Selects to Manage Country-State Select Boxes

Wednesday, July 14th, 2010

Javascript components for managing Dependent Selects is starting to find use in ecommerce applications we are developing. It all started with need for updating contents of State field, on change of Country in postal address forms.

More then a year ago we started using Ajax for updating State select box options on change of Country select box value. It was a step forward but I wasn’t satisfied. Recently I had time to build a Dependent Select javascript component that takes the process of managing dependent selects boxes to the next level. Please read my blog post, OFBiz Tutorial – Dependent Selects for Prototype, to know more about it. If you are wondering about a scenario from real world, Here you go.

Below is the piece of code from the Freemarker template for the Checkout page in OFBiz ecommerce application.  It renders Country and State select boxes with their options.

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div>
      <label for="shipToCountryGeoId">Country</label>
<select id="shipToCountryGeoId" class="required select dependentSelectMaster" title="shipToCountry" name="shipToCountryGeoId">
        <option title="${country.geoId}" value="${country.geoId}">${country.get("geoName")?default(country.geoId)}</option>
        <!--#list-->
      </select></div>
<div id="shipToStates">
      <label for="shipToStateProvinceGeoId">State</label>
<select id="shipToStateProvinceGeoId" class="required shipToCountry" name="shipToStateProvinceGeoId">
        <option class="${country.geoId}" title="${stateAssoc.geoId}" value="${stateAssoc.geoId}">&lt;#if shippingAddress.stateProvinceGeoId?has_content &amp;&amp; shippingAddress.stateProvinceGeoId?default("") == stateAssoc.geoId&gt; SELECTED <!--#if-->&gt;${stateAssoc.geoName?default(stateAssoc.geoId)}</option>
            <!--#list-->
          <!--#if-->
        <!--#list-->
      </select></div>

Following Javascript code will unobtrusively manage the relationship between Country select box (master) and State select box (slave),

?View Code LANGUAGE
1
2
3
$('checkoutPanel').select('.dependentSelectMaster').reverse().each( function (elt) {
  new Dependent( $$( '.'+elt.title ).first() , elt );
})

Where ‘checkoutPanel’ is Id of wrapper div that encloses checkout html form. Apply ‘dependentSelectMaster’ class to select boxes that have dependent slave elements, making them the master. Slave select box is related to its master using title and class attribute of elements, A select box is slave if it has a class applied to it that is equal to title of master select box.

The javascript code snippet traverses DOM tree looking for master select boxes. Using title attribute of master select it finds all the slaves and creates Dependent select relationship between them. Its all clean and simple.

Needless to say, you’ll need to include Prototype.js and DependentSelect.js in your webpage. I hope you will find this short OFBiz tutorial useful.

- 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.

Pricing Enterprise E-commerce Services

Tuesday, July 6th, 2010

Enterprise-e-Commerce

The enterprise e-commerce space is broadly varied, and the boundaries constantly shifting. Features and capabilities only available to huge players just 10 years ago are now more affordable and available to SMBs around the world.

Sometimes just using the term ‘enterprise e-commerce,’ however, can be difficult or misleading. Is enterprise e-commerce the right term to use for a company with 10,000 SKUs, doing a few million dollars a year in online sales? In the event that they manage their suppliers, inventory, warehouse, and fulfillment using an integrated system, for example, I would say yes — this counts as ‘enterprise e-commerce.’ Although clearly no Amazon or Zappos, these companies and their systems take it far beyond the simple eBay auction or basic storefront.

At HotWax Media, we provide enterprise e-commerce consulting services. Our core services are based around Apache OFBiz, but we regularly find ourselves integrating with 3rd party systems like NetSuite, Endicia, and many others. One day it could be SAP with multiple users, and the next day it could be QuickBooks piloted by the business owner herself. The very nature of an enterprise e-commerce system suggests that the consulting services can be quite different from one client to the next, and we have certainly found this to be true. We can find ourselves building systems that are similar in fundamental intent for companies whose revenues are separated by two orders of magnitude.

So the question comes up, what is the right way to go about pricing these services? Constructive Cost Model? (http://en.wikipedia.org/wiki/COCOMO) Probably not. Simple menu of services with some attention to psychology? (http://bit.ly/NLo3V) That’s better because it is more easily understood by the client, but it is not always easy to do on our end.

In fact, when doing unique service projects, you might say that with a fixed price, someone always loses. (http://bit.ly/9E0bbP) Either the vendor pads the cost to cover any surprises, and he wins, or the vendor fails to anticipate (and build in money to cover) the surprises, and he loses. The only thing for certain is that those surprises will come up, and someone will have to pay for them.

The next option is straight hourly work. This should be great for the vendor, but can lead to problems of its own in terms of project and cost management. When vendors are working on a straight hourly arrangement, they have less incentive to plan. While the idea of paying the vendor for his time is fair and honest, hourly projects (that lack planning) can end up costing more than the customer originally planned, and the projects can look expensive in hindsight. When the project is complete, lacking adequate planning, the tendency is to look back and say “All they wanted was X and it cost them Y!?” The problem is that the curvy, flexible path made possible by the hourly arrangement is overlooked in that simple analysis. By the way, this happens all the time with contractors, attorneys, and everyone else who offers services for an hourly rate; it’s not just software developers.

So this brings me to my method of choice for pricing projects: fixed team project planning and pricing. This approach can allow for the best of both worlds. In practice this ends up looking a lot like phased pricing, except that the cost does not vary month to month (except by mutual agreement). Rather, the dedicated team comes at a predictable expense and works off of a well formed project plan. (The creation of the plan is paid work as well, and can be more or less detailed depending on the size of the project and the client’s preference.) Then, the flexibility that real life requires comes in the form of more or less work being completed in each month (or phase).

So we can say, “We have a list of 10 items. We can be very confident that we will complete 5 of them, somewhat confident that we will complete 7 of them, and only slightly confident that we will complete all 10 of them.” At the end of each month, we reassess our plan and make adjustments based team velocity and client priority, leveraging the things we have learned while working on the implementation.

In conclusion: we do a lot of deals each year, and our approach to pricing varies a bit job to job. But whenever possible, we like this fixed team approach. It gives the client and provider both a fair deal, and encourages all parties to plan responsibly. We encourage you to try it out; if you would like us to help you with your enterprise e-commerce project using our fixed team approach, give us a call today!

Mike Bates is CEO at HotWax Media and will join other HotWax Media employees and advisors in periodically posting thoughts here related to OFBiz, eCommerce, ERP, and related topics.
Mike Bates - OFBiz Expert

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 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.