PartymgrFjs

30 novembre 2019

Party profile portlet migration

Party screen and portlet migration is the first step in the POC usability validation.
The complete process is describe in modular and generic UI documentation chapter in FrontJs Portal

This month was focus on migrate most of classical party portlet and solve not manage xml tag in the current vuejs components.

Portlet migrated :

  • PartyInfo

  • PartyContactMech has been migrated last month to test a vuejs dedicated component

  • PartyUserLogin with securityGroup management

  • PartyRelationFrom and PartyRelationTo

  • PartyRoles

  • PartyAttributes

  • PartyIdentifications

  • PartyNotes

  • PartyPaymentMethods

  • PartyContent

  • PartyAvsSettings

  • PartyLoyaltyPoints

  • Visit

  • PartyPortletDetail

  • PartyDetail

Currently there are, for most of them, a edit_param form defined. With current POC situation, there is no ways to use them, but when attributes are define in database, they are used by showPortlet.

Portal Page available

  • PartyMgntFrontJs : default portal page use to access Party detail portlet by portlet

  • PartyRecapFrontJs : same as Profile overview

  • PartyRecap : all the existing Portlet for a Party

Find-List Screen

Simple modification have been done to easily migrate screen to the POC, first step has been done with the classical Find - List screen.

The "main" (on controller point of view) partymgr screen is migrated but at minimal, just a part of find works and list with link to Recap Portal Page

POC VueJs enhancement

Testing the POC with the party portlet has shown some bugs or xml tag or properties not correctly manage (or not manage ;-)

  • eventMessage presentation, one by one and clearly print, error should be manually closed

  • better files organization and named

    • common VueJs files are now in vuejsPortal plugin

    • common-controller exist (in vuejsPortal) and used for all common uri

    • some file name have been review to use fjs all the time not portlet / portal / vuejs / …​

  • new xml tag managed or better management

    • password field

    • formControl in client level

      • required="Y"

      • mask

      • maxlenght

    • textarea

    • Fix displayField and hiddenField interaction in form

    • inPlaceEditor in display

    • hyperlink with text and image

    • horizontalSeparator

  • vuetify usage

    • better menu management, depending of place and number of items

    • theme menu in application menu, to choose dark or light mode and/or main color of current theme.
      User modifications are store with ofbiz standard setUserPreference.

    • Icon from MaterialDesign are usable, we choose to use mdi- prefix to determine in src tag if it’s a image or a police icon
      iconPurpose.properties file have been used to change a first group to MaterialDesignIcon.

  • Portal Portlet Attributes

    • attribute are read and put in context in the showPortlet process

    • default value for portlet attribute can be defined by using PortalPage = "NA" and Seq ="0000"

  • multiple minors corrections

problem not yet solve

Currently there is a strange problem with npm buil-prod, it’s necessary to run it twice, because first one failed and not second one !
The problem not exist with build-dev.

Currently on continuous integration process (demo-selenium.ofbizextra.org), we used build-dev to facilitate debug or study how vuejs application is organized.

Portlet migration from 13.07 process

A portletType screenlet screen has been created to facilitate migration. Should be used by copy - paste for each portlet.

A short documentation have been started for help migration operations. It’s really a V0, it will be enhance after more migration.

OFBiz best practice

Review all screen to be sure to use ${parameters.mainDecoratorLocation} for the main and uilabel decorator every time it’s possible.

In exampleFjs, correction of all screenlet title to be, now, with uiLabel.

Decorator have been created for find-list, similar to lookup to facilitate screen migration and put in a dedicated file.

Screen with VueJs

link and hyperlink use the VuejsRouter

Selenium WebDriver

During this month and with all these modifications, Example selenium scenario has been used to check main function are operational (continuous integration process).

Some enhancement have been done:

  • exampleFjs complete, add some id in vueJs template for OfbSwd project

  • eventMessage management

On Jenkin part, we have tested testingBot jenkins plugin to easily retrieve video, currently not all works but we have done a complete report to testingBot company (they are reactive, thank’s to us).