PlantCare - ECommerce Sample

Official Content
This documentation is valid for:

PlantCare is an example of ecommerce based on an online store for selling outdoor and indoor plants.


Its design can be adapted to different devices, sizes, and technologies. Therefore, the application can be used on cell phones, tablets, and desktops, both as a native app and as an app to run in a browser.

This example is intended to show a multi-interface application with a modern Sketch design provided by a designer.

Also, it shows the power of GeneXus’ multi-experience modeling. From a model –a Panel– GeneXus generates native apps for Apple and Android, as well as Progressive Web Applications (Front end Angular) that can run on these device browsers or on any desktop or device that runs a browser.

Live demo, etc.

KB overview (Spanish):

Angular App:
QR for Apple App (via KBN) and Android (.apk):

Note: PlantCareHome is the Main Object for Angular. PlantCare is the Main Object of Apple and Android.

Disclaimer: This live demo is deployed on a prototyping environment which is not optimized for best performance (i.e. not compressed, minified, etc)

Sources and requirements



Sketch file: It is the 'PlantCareSketch' File object in the KB.


KB: PlantCare
License: Apache License 2.0


GeneXus 17 Upgrade 10GeneXus .NET Generator
The appropriate generator must be configured according to the device:

Steps to run it


Note: In GeneXus 17 Upgrade 9, to run the application with Apple the Master Panel property of the Panel objects must be set to (none).

(*) Sample data load

The application has an integrated test dataset for testing it after the build process has been completed.

To this end, the “PlantCareCli” program will be used. It is a GeneXus main procedure that can be executed by command line to perform different actions depending on the parameter received.

PlantCareCli can receive one of the following parameters:

  • UNZIP: Unzips the test data.
  • IMPORT: Imports the test data. If data exists, it will be deleted.
  • CLEAR: Deletes the test data.

Based on the above, and taking into account that the build process automatically extracts the “” file, it will be unzipped using the “UNZIP” parameter:


Next, the data will be imported with the “IMPORT” parameter:


Development process

Several features and criteria of the development process are highlighted below.

Import from Sketch

The design was made in Sketch and then imported into the GeneXus KB through the Design Import option.

Once imported from Sketch, some minor adjustments were made to the layouts to achieve maximum consistency in each device, also adding logic and implementing the database connection.
The import from Sketch functionality allowed the development process to be more focused on the business logic.

Development with a coding standard

It was originally developed in GeneXus 17 Upgrade 9 following the GeneXus Development Guide to create consistent, high-quality code.

Component reuse

Several design components can be reused. After importing from Sketch, different Stencil objects have been created which enable the reuse of design components, thus increasing productivity.

In some cases, when the logic can also be reused or encapsulated, Components were used.

Shopping cart

To simulate a shopping scenario, a session per device is created using the ClientInformation.Id Property. The transactions associated with this functionality are Session, SessionFavorite, and SessionCart.

To turn this example into a real application, you will probably need to use GeneXus Access Manager (GAM) for security and user management purposes.
In addition, since the checkout function is not implemented, to extend it by implementing online purchases it is possible to use APIs to integrate with payment methods.


The panel header is componentized to encapsulate its operation. In this way, the events and characteristics are programmed in one place and used from most panels. A special feature is the use of the GlobalEvents external object, which is used to update the cart items.

Unit testing

The example has unit tests for managing the shopping cart. They can be reviewed in the “apiCartUpdateUnitTest” object.


Subscribe to KB feed
KnowledgeBase PlantCare
GeneXus Server URL here
No news available on this feed