Skip to content
Developer home
X3

Define the React components and data to retrieve from the endpoint

  Less than to read

React components

From the application design, you will create the following React components. Note that Sage carbon apps are React-based. React is a flexible JavaScript library for building user interfaces.

  • Menu component (1)
    • Logo
    • Menu selection
  • Function component:
    • Title (2)
    • Filter component (3)
    • Order result component (4)
    • Order detail component (5)

Data to feed the application

In this example, you will return only the fields needed. To do this, make one request containing all the fields to build the application.

  1. In this first GraphQL query, retrieve the customer list in the filter component (in ascending order and limit to 5 for demo purposes):

    {
      sage {
        x3BusinessPartners {
          customer(orderBy: "{ code: 1  }", first: 5) {
            edges {
              node {
                code
                companyName
              }
            }
          }
        }
      }
    }
    
  2. Then you can feed the query from step 1 to retrieve all the orders of the customer, including status, currency, and order detail, for example. Return the order list by customer with line detail (filtered by the selected customer):

    query GetOrderDetails($soldToCustomer: String, $orderBy: String) {
      sage {
        x3Sales {
          salesOrder(filter: $soldToCustomer , orderBy: $orderBy) {
            edges {
              node {
                id
                orderDate
                shipmentDate
                soldToCustomer{
                  code
                  companyName
                }
                orderStatus
                currency {
                  code
                }
                lines {
                  edges {
                    node {
                      lineNumber
                      sequenceNumber
                      quantityInSalesUnitOrdered
                      grossPrice
                      product {
                        localizedDescription1
                        image {
                          value
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    

Steps