Skip to content
Developer home
Product homepage
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