Differences between Ember and React Version of Quotes, Rebate Agreements and Agreements & Promotions

In version 8.0 Godfather, we have introduced a new UI for Quote and Rebate Agreement list and detail pages and in 9.0 Hurricane for Agreements & Promotions. This section summarizes the differences between the old Ember version and the new React version.

Note:

  • You can determine which version users will use by enabling/disabling React. Set the useReactFor : quoteDetail/rebateAgreementDetail/contractDetail feature flags to either true or false.

  • You can let users choose which version to use by enabling the Try New Quoting / Rebates / Agreements & Promotions button (showTryNewReactVersionButton feature flag). This button will be displayed in the Ember version. Users who switch to React using this button will be able to return to Ember via the Switch Back to Old Version menu option.

Application UI

General

  • Document is auto-saved when it is created; the Save button is no longer there.

  • The “Create New Revision” action opens the new revision straight away, no need to navigate to the new revision through a notification link or listing.

  • The Refresh button has been removed as it duplicates the browser’s refresh function.

  • Import/Export is split into two actions:

    • Copy all items to clipboard (without a dialog window)

    • Import items from clipboard (with a dialog window)

    • Labels for "Export PDF", "Export Word" and "Export Excel" can be modified independently in the Internationalization section. (In React they are dependent on the value of the key "sfdc_export" which stands for the Export button. Whatever value this key has, it is propagated to the other three export options and the type/format is added automatically.)

  • New header component with an updated design and support for new header features:

    • Document title is now editable in the header.

    • The current document status and the workflow status are displayed next to the document title.

  • The main action buttons are ordered from left to right and the layout is responsive to the screen size – buttons will move under a drop-down menu as the space shrinks.

  • Header is fixed when scrolling through tables and forms to ensure that the main action buttons are always visible.

  • A new right-hand side panel displays header outputs and results.

Items

Table

  • One unified table view that combines the features of the old Tree View and Simple Table View.

    • Selection pattern changed (Items and folders are individually selected but actions applied to the folder are applied also to the content of the folder, e.g., deletion, duplication).

    • New system column “Date Added” that can sort the items so that the newest ones are always displayed on top of the list.

    • Ability to add and manage folder structure in the table:

      • Move item(s) to a folder through item action.

      • Double-click for in-line editing of folder names.

      • Copy folder + folder content.

    • Fully fledged line item table with new features (most of them already available in our other tables application-wide):

      • Simple filters and quick operators

      • Multi-level sorting

      • Resizable columns supported by preferences

      • Auto-fit columns

Right-hand Side Panel

  • A new sider component with multiple tabs for displaying content such as document details, inputs & calculation results:

    • Inherited values from header or folder inputs are displayed as a placeholder text (if multiple items are selected the placeholder value only displays if all the items have the same inherited value).

    • If no item is selected the banner is displaying header information. Once an item is selected, the banner is displaying information in the context of the selected line item.

    • Contextual “Recalculate” button available at line item inputs for quick recalculation of changes performed on the line item (The action performs recalculation of any changes since last recalculation but doesn’t perform a full document recalculation).

    • Ability to edit multiple items with shared inputs at the same time.

    • Possibility to place the panel to the bottom of the screen and allow users to switch between these two positions.

    • Tabs displayed change contextually depending on which actions are performed:

      • Header recalculation unselects all items and shows header outputs.

      • Line item recalculation displays line item outputs.

Attachments

  • You can now add attachments by drag & drop into the whole attachment area.

  • We have also added an “Upload” to allow browsing for files if preferred.

  • List of attachments is now displayed in the new table component.

Workflow

  • List of workflow steps is now displayed in the new table component.

Workflow History

  • List of workflow history items is now displayed in the new table component.

Dynamic Tabs

  • Ability to display multiple dashboards in tabs.

  • Additional support for dynamic tabs, including:

    • Disabling tabs

    • Hiding tabs

    • Setting tabs as exclusive for specific user groups

    • Changing order of tabs

Backend

New Backend API

  • The new backend API is better performing and responsive:

    • The prior version was always sending the entire quote to the backend, while the new backend API sends only the part which is needed under the given circumstances.

    • There is also a new concept of performing actions asynchronously when long waiting time for action execution is detected.
      The asynchronous actions are performed based on the number of line items and are set in the Configuration page.

Feature Flags

Certain Feature Flags are specific to Ember and no longer applicable in React. The following flags have not been implemented for React:

  • contractHeaderConfiguration.showContractHeader

  • rebateAgreementHeaderConfiguration.showRebateAgreementHeader

  • expandWorkflowComments

  • enableDebug

  • quoteSaveBeforeSubmit

  • contractSaveBeforeSubmit

  • contractButtonsConfiguration.showSaveButton

  • contractButtonsConfiguration.showWorkflowButton

  • quoteButtonsConfiguration.showRecalculateChanges

  • quoteButtonsConfiguration.showSaveButton

  • quoteButtonsConfiguration.showWorkflowButton

  • quoteHeaderConfiguration.showQuoteHeader

  • quotes.enableHighchartsThemeInEmber

  • quotes.omitTableLevel

  • quotes.showInputsView

  • quotes.showItemsViewOptions

  • quotes.showQuoteLabel

  • rebateAgreementSaveBeforeSubmit

  • rebateAgreement.showInputsView

  • rebateAgreement.showItemsViewOptions

  • rebateAgreement.showRebateAgreementLabel

  • rebateAgreementButtonsConfiguration.showSaveButton

  • rebateAgreementButtonsConfiguration.showWorkflowButton

  • keyTypingDebounceDelay.quickFilters

  • keyTypingDebounceDelay.lookup

  • serverAPIs.defaultRecordsLimit

  • serverConnectionChecker.intervalSecs

  • serverConnectionChecker.maxConsecutiveFailures

  • modulePrefix

  • rootURL

  • locationType

  • validateInputsOnSave

  • timeFormat

  • serverConnectionChecker.pingEndpoint

  • rebateAgreementItemInput.lookupField

  • rebateAgreementInput.disabled

  • rebateAgreementInput.lookupField

  • rebateAgreementInput.placeholder

  • rebateAgreementInput.searchButtonTip

  • customerInput.disabled

  • customerInput.lookupField

  • customerInput.placeholder

  • customerInput.searchButtonTip

  • productInput.automaticSelection

  • productInput.disabled

  • productInput.lookupField

  • productInput.placeholder

  • productInput.searchButtonTip

  • productSearchWithQuoteItems

  • productPickerPageLength

  • contractItemInput.lookupField

  • contracts.omitTableLevel

  • contracts.showContractLabel

  • contracts.showInputsView

  • contracts.showItemsViewOptions

  • showPerformanceWarningWhenOpeningTreeView

  • showTableView

  • tableView.provideTableView2

  • tableView.showConfiguratorsInLineItemDetail

  • tableView.showLineItemDetailsBelowTable

  • tableView.showOverridableFielsAtLineLevel

  • inputRules

  • APP.name

  • APP.version

  • configurator.autoRecalc

  • configurator.autoRecalcDelay

  • configurator.autoRecalcFeatureEditable

  • configurator.showUndoClearButtonsInlineConfigurator

  • dashboard.inputsOpened

  • moment.includeTimezone

  • notification.automaticallyCloseAllPopups

  • dateFormat

  • exportApplicationGlobal

  • showLineItemButtons

Found an issue in documentation? Write to us.

 
Pricefx version 12.0