BLOG

NEXT STEPS

Posts Tagged ‘OFBiz Tutorial’

« Older Entries
Newer Entries »

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)

?View Code HTML
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.

Tags: , , ,
Posted in OFBiz, OFBiz Tutorials, Prototype Tutorials | 1 Comment »

OFBiz Tutorial – How to fulfill a sales order that has more than one ship group

Friday, April 23rd, 2010

In our last OFBiz tutorial by Jacopo we learned how to place a sales order comprising of multiple ship groups. Lets carry on with this OFBiz development tutorial and learn how to fulfill a sales order containing more than one ship group which is yet another interesting feature present OOTB.

The items in the ship group may differ from the previous tutorial and is not important though but in general the tutorial will present you with a step by step guide to fulfill a sales order.

Lets get started assuming that you have a very basic knowledge of warehouse.

The first step is to select a warehouse.

OFBiz Tutorial - Sales Order - Step 1

Select a warehouse from the drop-down and click on the submit button. Go to Picking tab to see the orders for picking.

OFBiz Tutorial - Sales Order - Step 2

The screen displays a list of orders that are in approved status. An order may require stock move prior to picking. There are a total of 4 grouping methods available OOTB to group the orders for picking namely: Group by Shipping Method, Group by Warehouse Area, Group by Number of Order Items and Zero grouping.

Lets just stick to zero grouping method i.e. when no grouping method is selected. From the screen below (part of the above screen) we find that order is not ready for picking yet and needs a stock move.

Stock move is moving inventory from a bulk location to a primary/pick location where a picker can actually pick the inventory items.

OFBiz Tutorial - Sales Order - Step 3

You cannot create a picklist until and unless order is ready for picking. Lets do the required stock move first.

OFBiz Tutorial - Sales Order - Step 4

Once we complete the stock move, the screen will show that no other stock move is required.

OFBiz Tutorial - Sales Order - Step 5

Lets go back to the picking screen and see whether the order is now ready for picking or not.

OFBiz Tutorial - Sales Order - Step 6

Now the order is ready for picking (see the second column) and we can create the picklist as well. After creating the picklist, we need to pick the order. This can be done through Manage Picklist screen.

OFBiz Tutorial - Sales Order - Step 7

Once the order is picked, change the status from the drop-down to Picked.

OFBiz Tutorial - Sales Order - Step 8

The order picking is now complete. Lets move further and learn how to pack the order. Click on Packing tab. On the packing screen, enter the order ID (left most) and the ship group ID (Right most) in the input box. The ship group though defaults to 00001 and you may only need to change it if you are packing the order for a different ship group other then 00001.

Click on Pack Order button. This will show the items that need to be packed for ship group 00001.

OFBiz Tutorial - Sales Order - Step 9

Click on Pack Item button. This will pack all the items in a single package and will show the number of package and items in these packages.

OFBiz Tutorial - Sales Order - Step 10

Click on Complete button. This will complete the packing of order for ship group 00001. A shipment and an invoice will be generated.

OFBiz Tutorial - Sales Order - Step 11

Now lets try to print the shipping label that can be affixed on this package. For this click on the shipment ID link and then go to Route Segments tab.

OFBiz Tutorial - Sales Order - Step 12

Click on Confirm Shipment with UPS button to confirm the shipment with UPS. Once the shipment is confirmed, a new button “Accept UPS Shipment Confirmation” will appear on the screen.

OFBiz Tutorial - Sales Order - Step 13

Click this button and the shipping label will be received from the UPS.

OFBiz Tutorial - Sales Order - Step 14

The shipping label can be viewed from View Label Image button and once printed can be affixed on each package.

You can now perform the same steps to pack items for ship group 00002. Once the order is packed for both ship groups the status of order will change to Completed.

OFBiz Tutorial - Sales Order - Step 15

This accomplishes the fulfillment of the order.

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.

Tags: , , , , ,
Posted in Apache OFBiz, Apache OFBiz Development, Enterprise eCommerce, HotWax Media, OFBiz, OFBiz Development, OFBiz Tutorials | 1 Comment »

OFBiz Tutorial – Order Entry and Ship Groups

Friday, April 16th, 2010

A robust enterprise eCommerce system needs to handle manual order entries that are sometimes complex. In this OFBiz Tutorial we will go over how this works in OFBiz.

Example:

An order clerk has to place a sales order on behalf of a customer (order received by fax, by mail, by phone etc..); the order contains several items and the customer asks that the order is shipped with two (or more) shipments with different delivery dates and/or to different postal addresses and/or with different shipment methods or shipping instructions; the customer clearly specify the items to be assigned to each shipment.

How can you do this in OFBiz?

The order clerk can easily place an order like this by defining multiple ship groups: ship groups represent a way to group into different sets the items of an order and each ship group has its own shipping options, delivery dates, shipment address. Ship groups are created during order checkout.

For example, let’s suppose that the order clerk has to place an order for 10 units of the product with id WG-1111 and 5 units of the product with id GZ-1000.

The customer needs immediately 5 units of WG-1111 and prefers to pay for the quickest shipment method available, while all the 5 units of GZ-1000 and the remaining 5 units of WG-1111 (together with some promotional items) can wait and so they will be shipped using a cheaper and slower shipping method later.

Let’s do this step by step.

The first part is easy because it is exactly like placing a standard order:

go to the order entry screen and enter the customer id

sg1

add to the cart 10 units of WG-1111 and 5 units of GZ-1000 (don’t worry about the ship groups now, you will do this at checkout); if you are running the standard OFBiz demo you will also get some promotional items

sg2

now we are ready for the checkout and we click on the “Finalize Order” button;

sg3

the first checkout screen let us select the shipment address and this is where we add the second ship group that we need by clicking on the “New Ship Group” button:

sg4

the page will reload with two ship group sections; set the shipment address for each of them and click on the “Continue” button

sg5

in the next screen you will have the ability to move the items from one ship group to the other; initially all the items will be in the first ship group and the second one will be empty

sg6

using the drop down boxes and the quantity field near each item you can move the items to the second ship group

sg7

now click on the “Continue” button, the next screen will let you set the shipment method and options for each ship group; just make sure you select the proper method for each group;

sg8

sg9

The next steps are exactly the same as a standard order, so complete the checkout and confirm the order.

The exercise is now complete!

If you visit the order detail screen you will notice that there are now two boxes for the shipment information (one for each group):

sg10

You can now fulfill the order as usual and the only difference is that you will create two different shipments (one for each ship group): when the shipment is created from the ship group, OFBiz will create a shipment containing the items assigned to that ship group only.

- Jacopo

Jacopo Cappellato is VP of Technology at HotWax Media and has been involved with the OFBiz project since 2003. He is an OFBiz Project Committer and a member of both the OFBiz Project Management Committee and the Apache Software Foundation.Jacopo Cappellato - OFBiz Developer - OFBiz Expert

Tags: , , , , , ,
Posted in Apache OFBiz, Apache OFBiz Development, HotWax Media, OFBiz Development, OFBiz Tutorials | 2 Comments »

OFBiz Tutorial – Using CMS for Front End Application Static Pages – Part-1‏

Wednesday, March 17th, 2010

In this post we will demonstrate OFBiz Content Management System usage for front end application static pages through simple content data setup and using it in a screen. This gives clients the flexibility to change the text to be shown on a static page when ever they want, without asking for any code change.

Take the example of an OFBiz e-commerce storefront web site.  Often times, clients will wish to include “static” pages like About Us, FAQ, and so on.  We want to empower the client to update this copy him/herself, without needing to request help from a programmer.  The following example gives us a simple look at how that is done.

All the details given here are supported by the out-of-the-box (OOTB) OFBiz CMS implementation.

In this exercise we will:

  • see the basic concept of DataResource and Content record.
  • setup content data to embed FTL markup.
  • setup a content driven screen and use it show the static content setup in data.

• Assumption: a component is already setup; here we using the name “cmsdemo” for component.

DataResource and Content records

Let’s suppose that we want to define content (that we will include in a screen) for the text “This is the text that will appear on screen.”.

Data Resource of type ELECTRONIC_TEXT

First of all we have to define a DataResource representing this text. This gives you greater flexibility because you can store long texts in the textData field. If you want to embed FTL markup (directives etc…) that needs to be processed before the rendering you can achieve this using the dataTemplateTypeId attribute, in this way all the Freemarker instructions in the text will be executed before rendering the screen. Following data needs to be setup in a data file:

?View Code LANGUAGE
1
2
3
4
5
6
7
8

</p>
<DataResource dataResourceId="DS_EXAMPLE" dataResourceTypeId="ELECTRONIC_TEXT" dataTemplateTypeId="FTL"/>
<ElectronicText dataResourceId="DS_EXAMPLE">
<textData><![CDATA[
<h1>CMS DEMO</h1>
<h2>This is the text that will appear on screen.</h2>
]]></textData>
</ElectronicText>
Content

Now we have to create a Content record that is associated to the DataResource. 
No matter what type of data resource you have choosen, the Content record is the same like:

?View Code LANGUAGE
1

<Content contentId="CN_EXAMPLE" contentTypeId="DOCUMENT" contentName="Content 01" dataResourceId="DS_EXAMPLE"/>

Using the element in a screen definition.

Now we can easily include the content directly inside the section of the screen definition with the following directive:

?View Code LANGUAGE
1
2
3
4
5
6
7
8
9

<screen name="main">
<section>
<actions>
</actions>
<widgets>
<content content-id="CN_EXAMPLE"/>
</widgets>
</section>
</screen>

Running the content driven screen

Load data created for static content

Make sure to have an entry in ofbiz-component file for the data file created for CMS date that we created earlier in the step.

?View Code LANGUAGE
1

<entity-resource type="data" reader-name="demo" loader="main" location="data/CmsDemoDemoData.xml"/>

or you can also load it through webtools \–> XML Data Import.

Now make sure you have main request and view defined in your controller file:

?View Code LANGUAGE
1
2

<request-map uri="main"><security https="false" auth="false"/><response name="success" type="view" value="main"/></request-map>
<view-map name="main" type="screen" page="component://cmsdemo/widget/CmsDemoScreens.xml#main"/>

When the request [https://localhost:8443/cmsdemo/control/main] is served you will see the following page that will show up the contents that you have setup in data:

ofbiz cms content management

This was a very basic example of OFBiz CMS capability.  We will expand on the details and demonstrate more OFBiz CMS functionality in upcoming posts.  If you need help with OFBiz CMS in the mean time, 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.

Tags: , , , ,
Posted in Apache OFBiz, Apache OFBiz Development, OFBiz, OFBiz Development, OFBiz Tutorials, OFBiz eCommerce | 2 Comments »

OFBiz Tutorial – Implementing a Product PDF export

Tuesday, February 23rd, 2010

In our last post of the tutorial series OFBiz Tutorial – Implementing a Product CSV export we have learned how to quickly implement a CSV export of a list of rows.

In this post we will perform similar steps in order to create a PDF version of the “Product List” screen.
PDF exports are supported out of the box by the OFBiz widgets.
In this excercise we will:

  1. add to the product list screen a link, close to the CSV export link we have created in our last post, that will generate the PDF export
  2. add to the controller.xml file the request and view entries for the new PDF export screen
  3. implement the new screen definition for the PDF export screen; the screen will reuse the same form used by html screen but with a different decorator (more suited for PDF output)

Adding a link element

We have already learned how to create a link in a screen. We add it after the “CSV Export” link:

?View Code HTML
1
2
3
4

<container style="button-bar">
    <link target="ProductListExport" text="CSV Export" style="buttontext"/>
    <link target="ProductListPDF" text="PDF Export" style="buttontext"/>
</container>
  • the new link is inside of the same “container” element of the “CSV Export” link; we want the two links rendered close to each other
  • the link element is defined in the same way we have defined the other link

Controller entries for a PDF export screen

?View Code HTML
1
2
3
4
5
6

<request-map uri="ProductListPDF">  
    <security https="true" auth="true"/> 
    <response name="success" type="view" value="ProductListPDFScreen"/>
</request-map> 
... 
<view-map name="ProductListPDFScreen" type="screenfop" content-type="application/pdf" page="component://hwm/widget/HwmScreens.xml#ProductListPDF"/>

The entries are very similar to the ones we have implemented in a previous post for the product list screen. There are just a couple of things to notice:

  • as usual, the request-map uri must match with the target of the link element in the screen (”ProductListPDF”)
  • in the view-map, the type is now “screenfop” (instead of “screen”) because we have to invoke the “fop screen renderer” to generate a PDF output
  • in the view-map we have also set the content-type to “application/pdf” as useful metadata information for the browser

Screen definition for PDF export screens

There isn’t anything special in a screen definition for a PDF export; the screen is defined in the same way of a normal screen, except for a couple of details:

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<screen name="ProductListPDF">  
    <section>  
        <actions>  
            <set field="viewSize" value="10000"/>  
            <set field="pageLayoutName" value="main-page-landscape"/>  
            <entity-condition entity-name="Product" list="products">  
                <order-by field-name="productId"/>  
            </entity-condition>  
        </actions>  
        <widgets>  
            <decorator-screen name="FoReportDecorator" location="component://common/widget/CommonScreens.xml">  
                <decorator-section name="body">  
                    <container>  
                        <label text="Finished Products" style="h1"/>  
                    </container>  
                    <include-form name="ListProducts" location="component://hwm/widget/HwmForms.xml"/>  
                </decorator-section>  
            </decorator-screen>  
        </widgets>  
    </section> 
</screen>
  • the screen definition is mostly identical to the “product list screen” except for the decorator element: we are now using the FoReportDecorator that is one of the screen decorators available out of the box in OFBiz (it renders simple PDF reports with a page-of-pages footer, logo etc.)
  • in particular, the entity-condition element is the same and it is used to select the list of products for the export
  • the form that is included is the same of the “product list screen”: we will not have to re-implement it because the widget renderer will take care of rendering it into the proper output (PDF or CSV or html)
  • as we already did for the CSV screen, the “set” field operation, where we set “viewSize” to “10000″, is an easy way to “disable” pagination; we actually define the top limit of our product export to 10000 records here, but of course we can use a different value
  • there is an additional set operation here (for “pageLayoutName”), to set the PDF layout to landscape

Conclusion

The exercise is complete and we can test the product PDF by clicking the “PDF Export” link (there is no need to restart OFBiz).

Implementing the PDF report ended up being very similar to implementing the CSV export (or HTML screen): in OFBiz the same patterns, tools and languages can be reused to dramatically improve productivity.

- Jacopo

Jacopo Cappellato is VP of Technology at HotWax Media and has been involved with the OFBiz project since 2003. He is an OFBiz Project Committer and a member of both the OFBiz Project Management Committee and the Apache Software Foundation.Jacopo Cappellato - OFBiz Developer - OFBiz Expert

Tags: , , ,
Posted in Apache OFBiz, Apache OFBiz Development, HotWax Media, OFBiz, OFBiz Tutorials, OFBiz eCommerce | 8 Comments »

« Older Entries
Newer Entries »