Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
minLevel1
maxLevel6
outlinefalse
stylenone
typelist
printabletrue

Introduction

Note

As a prerequisite, you need to ensure that the fields you want to display are actually retrieved in the query. For more information, click here /wiki/spaces/DOCUMENTAT/pages/1140785164

What we call ‘displayed properties’ is the information displayed on all Store App display blocks, at different levels (orders, lines, parcels, etc) as well as in the popins.

...

You can find the displayed properties configuration in the Configuration > Store App > Page settings > {Page name} > Displayed properties section of your admin backoffice.

The default configuration is displayed, but it can be overwritten. In general, property blocks are organised into 3 lines, each of which can be overloaded independently

...

Tip: to return to the default configuration, click on the wheel and then ‘return to default configuration’.

Entities

...

table

In each page, the display blocks correspond to particular entities, and it is sometimes difficult to navigate. You can use the table below to find the names of the entities used page by page.

Expand
titleSee entities table

Page

Entities

Sections

Claim

  • Order

  • Line item group

  • Classic claim page

Image Modified

Picking

  • Endpoint order

  • Piece group

  • Order

  • Picking page before selection

Image Added
  • Picking page after selection

Image Added

Prepare (select)

  • Endpoint order

  • Piece group

  • Classic prepare select page

Image Added

Pack

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Classic pack page

Image Modified
  • Classic pack page with “multi parcel” allowed

...

DIY

CODE

Code Block
languagejson
{
  "options.create_multi_parcels": true
}

...

Image ModifiedImage Modified
  • Pack page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

Image Modified

Pack - scan

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Carrier pop-in

  • Parcel

  • Classic pack scan page before selection

Image Modified
  • Pack scan page before selection with “multi parcel” allowed

Image ModifiedImage Modified
  • Classic pack scan page after selection

Image Modified
  • Pack scan page after selection with “multi parcel” allowed

Image ModifiedImage Modified

    Context

    Store App properties are used to customize the information displayed on every pages and in every popins.

    ...

    Panel
    panelIconIdatlassian-light_bulb_on
    panelIcon:light_bulb_on:
    panelIconText:light_bulb_on:
    bgColor#FFFAE6

    Tip: to view the current properties applied in your Store App, use the command dumpConfig("properties") in the Store App console.

    Configuration

    You can find the displayed properties configuration in the Configuration > Store App > Page settings > {Page name} > Displayed properties section of your admin backoffice.

    image-20240515-123047.pngImage Removed

    image-20240515-123043.pngImage Removed

    Multi parcel

    In the case of pages that support multi-packaging (bag and pack), there is an entity called multi_order. It corresponds to the entity used when the store app is configured for multi-packaging.

    • Document printing pop-in after scan

    Image Added
    • Pack scan page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

    Image Added

    Dispatch

    • Parcel

    • Line item Group

    • Shipment manifest

    • Classic dispatch page

    Image Added
    • Dispatch page with the “need_shipment_manifests” option enabled

    Image AddedImage Added

    Bag

    • Order

    • Line item group

    • Order multi

    • Multi container

    • Endpoint order

    • Piece group

    • Classic bag page

    Image Added
    • Classic bag page with “multi parcel” allowed

    Image AddedImage Added
    • Bag page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley)

    Image Added

    Bag - scan

    • Order

    • Line item group

    • Order multi

    • Multi container

    • Endpoint order

    • Piece group

    • Carrier pop-in

    • Classic bag scan page before selection

    image-20241114-170216.pngImage Added
    • Bag scan page before selection with “multi parcel” allowed

    Image Addedimage-20241114-170239.pngImage Added
    • Classic bag scan page after selection

    Image Added
    • Bag scan page after selection with “multi parcel” allowed

    Image AddedImage Added
    • Document printing pop-in after scan

    Image Added
    • Bag scan page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

    Image Added

    Receive

    • Parcel

    • Line item group

    • Classic receive page

    Image Added

    Collect

    • Order

    • Bag

    • Box

    • Line item group

    • Classic collect page

    Image Added

    Reserve

    • Order

    • Line item group

    • Classic reserve page

    Image Added

    Carry

    • Parcel

    • Bag

    • Line item group

    • Classic carry page

    Image Added

    Catalog

    Basket CRM

    • Item

    • Basket CRM page of the catalog

    Image Added

    Catalog

    Basket customer payment

    • Customer

    • Basket customer payment page of the catalog

    Image Added

    Catalog

    Basket Shipping options

    • customer

    • address

    • delivery promise information

    • Basket Shipping options of the catalog

    Image Added

    Order list

    • Endpoint order

    • Piece group

    • Classic orders list page

    Image Added

    Sorting

    • Sorting page before scan

    Image Added
    • Sorting popin for item scan

    image-20241115-145048.pngImage Added

    image-20241115-145041.pngImage Added

    Moving

    Image Added

    Image Added

    Image Added

    Boxing

    Image Added

    image-20241115-144543.pngImage Added

    Users

    • User

    Image Added

    Customer search

    • Before selection

    Image Added
    • After selection with a shipped parcel

    Image Added
    • After selection with a processing parcel

    Image Added
    • Return popin

    Image Added
    • After selection with a return

    Image Added
    • Return details pop-in

    Image Added

    Display the correct field

    It's not easy to find the right path for the field you want to display, especially as the logic depends on each page.

    The best way is to use the paths configured by default on the entity, and try to reproduce the same path with the field you want to add.

    Example:

    containers.0.parcel.delivery.carrier.name displays the name of the carrier in the ‘order’ section of the pack page

    Specific formatting

    Syntax

    Properties often need to be formatted for aesthetic reasons.

    It is possible to use one or more

    ...

    formats with the following syntax

    ...

    field|formatter1:option|formatter2|formatter3.

    ...

    In the absence of parentheses, formats are applied from left to right.

    Examples:

    • to capitalize the first letter of the delivery type, use delivery.type|capitalize

    • to retrieve the 3rd element of an array (index 2), I'll use delivery.destination.address.lines|arrayelement:2

    Note

    The format |rawstring:must be applied to the left of the field, unlike the other

    Parenthesis

    A parenthesis syntax is available for the most complex expressions.

    Properties that are nested within parentheses will be evaluated first.

    ...

    Example:

    The following property will display 1 / 2.

    ...

    parcels|forcount:line_item_ids|concatraw:

    ...

    /

    ...

    |concatraw:

    ...

    (line_item_groups|length)

    ...

    All

    ...

    formats available

    Name

    Description

    Option

    Example → Render

    arrayelement

    Retrieves the element of an array with index.

    Element index

    types|arrayelement:0→ ffs

    capitalize

    Replace all letters with lower case, except the first, which is upper case.


    features.name|capitalize → Summer dress

    concat

    Concatenates another property, without spaces.

    Property to concatenate

    carrier|concat:tracking_code → ups64477466854

    concatraw

    Concatenates a string.

    Defined string

    state|concatraw:from warehouse → dispatched from warehouse

    currency

    Formats a number into a currency, with a symbol defined in another property.

    Property containing the currency

    payment.price|currency:payment.currency -> 35,99 £

    currencyraw

    Formats a number into a currency, with a symbol defined in the expression.

    The currency to use

    payment.price|currencyraw:USD → 35,99 $

    dateto

    Format a date range.

    Property corresponding to end date

    eta_start|dateto:end_end → 27 - 30 september

    divide_by

    Divides a value of a property by an another.

    Divisor property

    order_item.pricing_details.price|divide_by:order_item.quantity → 3 (price = 6 and quantity = 2)

    expirationcolor

    Returns a date in the color sent if expired.

    It is possible to pass a relative parameter (seconds to be subtracted from the expiry date).

    The warning value to be subtracted from the current date for the calculation (in seconds)

    The color to be set if the date has expired.

    The value to be returned.

    expiration_dates.client_collect.expiration|expirationcolor:86400,danger,(expiration_dates.client_collect.expiration|moment:DD/MM/YYYY|transcount:carry.reserved_till) → Reserved until 10-02-2023

    filter

    Scans an array and keeps the elements of this array whose property is worth one of the values provided.

    Comma-separated list of values

    line_item_groups|filter:state=removed,mistaken|length|concatraw: items sont removed ou mistaken → 5 items sont removed ou mistaken

    filterlength

    Scans an array and counts the number of elements in the array whose property has one of the provided values.

    Comma-separated list of values

    line_item_groups|filterlength:state=removed,mistaken|transcount:order.cancel_count → 5 canceled

    forcount

    Scans an array and counts the size of each property in the array.

    Property

    parcels|forcount:piece_ids|transcount:order.item_count → 5 items

    hierarchicalchoose

    Scans an array and returns the element with the lowest index in the array defined in option . If nothing matches, does nothing.

    Comma-separated list of values

    types|hierarchicalchoose:ois,ckc,ffs → ckc

    index_ranges_quantity

    Calculates the total quantity of indexes in the supplied index ranges.

    parcel.line_item_index_ranges|index_ranges_quantity|transcount:order.item_count → 5 items

    length

    Returns the length attribute of an array or string.


    piece_ids|length → 3

    link

    Formats the result as a link.

    Property

    delivery.carrier.name|link:delivery.carrier.tracking_url → <a href="colissimoURL">colissimo</a>

    link_blank

    Formats the result as a blank link.

    Property

    delivery.carrier.name|link:delivery.carrier.tracking_url → <a target="_blank" href="colissimoURL">colissimo</a>

    lowercase

    Replace all letters with lowercase letters.


    features.name|lowercase → summer dress

    moment

    Format a timestamp using momentjs.

    Date format

    date|moment:DD/MM/YYYY → 29/03/2018

    mutiply

    Multiplies two values.

    Can take optional features or constants.

    You can limit the number of decimal places by adding a second argument separated by a comma. By default, results are limited to 2 digits after the decimal point.

    payment.price|multiply:features.quantity → 17.97 (payment.price = 5.99 and features.quantity = 3)

    payment.price|multiply:features.quantity,2 → 3.333333 (payment.price = 10 and features.quantity = 1/3)

    prepend

    Concatenates another property on the left.

    Property

    tracking_code|prepend:carrier → ups64477466854

    prependraw

    Concatenates a string on the left.

    Defined string

    state|prependraw:State is → State is dispatched

    rawstring

    Replaces the result with a string defined.

    Defined string

    |rawstring:units → units

    sum

    Scans an array and sum the given property in the array.

    Property

    line_item_groups|sum:payment.price → 75.8

    trackingcode

    Displays tracking code if available, translates key passed in parameter otherwise.

    Key to translate

    tracking_code|trackingcode:parcel.no_tracking_information → XV265564654 or Missing tracking

    trans

    Translates the result (if the translation key exists).


    |rawstring:states.|concat:state|trans → Dispatch

    transcount

    Takes a number as input and calls a translation with pluralization.

    Key to translate

    line_item_groups|length|transcount:order.item_count → 3 items

    transcountnotnull

    Calls a translation with pluralization on the input. Displays nothing if !input is false in the javascript sense.

    Key to translate

    line_item_groups|length|transcountnotnull:order.item_count

    with line_item_groups = [] :

    with 2 line_item_groups: 2 items

    unfilterlength

    Scans an array and counts the number of elements whose property is not one of the provided values.

    Comma-separated list of values

    line_item_groups|unfilterlength:state=removed,mistaken|concatraw: not canceled → 5 not canceled

    uppercase

    Replace all letters with capital letters.


    features.name|uppercase → SUMMER DRESS

    since

    Takes a date as input and returns the difference from now in the site's lang.


    date|since → since 1 hour