Skip to main content

Conditional Rendering in CargoXplorer TMS

Introduction​

Conditional rendering is a powerful feature in CargoXplorer TMS that allows components to be displayed or hidden based on specific conditions. This functionality enhances the user interface by showing relevant information and controls dynamically, improving the overall user experience and workflow efficiency.

YAML Structure​

component: someComponent
props:
  isHidden: "{{ eval someCondition }}"
  # Other props...

Attribute Description​

  • isHidden: (string) A boolean expression that determines whether the component should be hidden.
    • When true, the component is not rendered.
    • When false or not provided, the component is rendered normally.

Examples​

Basic Visibility Control​

component: text
props:
  isHidden: "{{ eval myForm.firstName === 'John' }}"
  value: "This text is only visible if the first name is not John"

Conditional Form Field​

component: field
name: additionalInfo
props:
  isHidden: "{{ eval !myForm.needsAdditionalInfo }}"
  label: "Additional Information"
  type: "textarea"

Complex Condition​

component: button
props:
  isHidden: "{{ eval user.role !== 'admin' && shipment.status !== 'pending' }}"
  label: "Approve Shipment"
  onClick:
    - mutation:
        # Mutation details...

Advanced Techniques​

Using Multiple Conditions​

You can combine multiple conditions using logical operators:

component: alert
props:
  isHidden: "{{ eval !(shipment.isLate && shipment.value > 10000) }}"
  type: "warning"
  message: "High-value shipment is delayed!"

Dynamic Styling​

While not hiding the component, you can use conditions to change styles:

component: text
props:
  value: "Shipment Status: {{ shipment.status }}"
  style:
    color: "{{ eval shipment.status === 'completed' ? 'green' : 'red' }}"

Conditional Children Rendering​

You can conditionally render child components:

component: layout
children:
  - component: text
    props:
      value: "Always visible text"
  - component: text
    props:
      isHidden: "{{ eval user.role !== 'admin' }}"
      value: "Admin only text"

Best Practices​

  1. Keep conditions simple and readable. Complex conditions should be broken down or moved to computed properties.
  2. Use meaningful variable names in your conditions to improve code clarity.
  3. Consider the performance impact of complex or frequently changing conditions.
  4. Ensure that hiding critical components doesn't break the user flow or accessibility.
  5. Use conditional rendering judiciously – overuse can lead to a confusing user interface.
  6. Test thoroughly with different data sets to ensure all conditional paths work as expected.

Future Enhancements​

While currently not implemented, the following feature is planned for future releases:

Switch Component​

The switch component will provide a more structured way to handle multiple conditional cases:

component: switch
children:
  - component: case
    props:
      when: "{{ eval shipment.status === 'pending' }}"
    children:
      - component: button
        props:
          label: "Approve Shipment"
  - component: case
    props:
      when: "{{ eval shipment.status === 'in_transit' }}"
    children:
      - component: text
        props:
          value: "Shipment is on its way"
  - component: default
    children:
      - component: text
        props:
          value: "No actions available"

This structure will allow for more readable and maintainable conditional logic, especially for complex scenarios with multiple possible states.