> ## Documentation Index
> Fetch the complete documentation index at: https://developers.pleo.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Queue Export Items in Pleo's Web App

export const WhatComesNext = ({children, href}) => <div className="mt-4">
    <a href={href} className="btn-primary">
      {children} →
    </a>
  </div>;

export const QueueExportItemsDiagram = () => {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const check = () => setIsDark(document.documentElement.classList.contains("dark"));
    check();
    const observer = new MutationObserver(check);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const nodeFill = isDark ? "#212222" : "#EEF4F4";
  const nodeStroke = isDark ? "#848989" : "#E1E6E6";
  const nodeTextStyle = isDark ? ",color:#EEF4F4" : ",color:#131414";
  const linkStyle = isDark ? "" : "linkStyle default stroke:#848989,stroke-width:1px;";
  const diagram = `
%%{init: {"themeVariables": {"fontSize": "28px"}}}%%
flowchart LR
    S1["1. Open Exports"] --> S2["2. Select Expenses"] --> S3["3. Add to Export Queue"] --> S4["4. Open Export Queue"] --> S5["5. Confirm Expenses"] --> S6["6. Create Export Job"] --> S7["7. Export Job Created"]

click S1 "#1-open-exports"
click S2 "#2-select-expenses"
click S3 "#3-add-to-export-queue"
click S4 "#4-open-export-queue"
click S5 "#5-confirm-queued-expenses"
click S6 "#6-create-export-job"
click S7 "#7-export-job-is-created"

style S1 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S2 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S3 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S4 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S5 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S6 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style S7 white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
${linkStyle}
`;
  return <Mermaid chart={diagram} />;
};

export const WorkflowDiagramTopNav = ({highlight}) => {
  const [isDark, setIsDark] = useState(false);
  useEffect(() => {
    const check = () => setIsDark(document.documentElement.classList.contains("dark"));
    check();
    const observer = new MutationObserver(check);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return () => observer.disconnect();
  }, []);
  const nodeFill = isDark ? "#212222" : "#EEF4F4";
  const nodeStroke = isDark ? "#848989" : "#E1E6E6";
  const nodeTextStyle = isDark ? ",color:#EEF4F4" : ",color:#131414";
  const subgraphFill = isDark ? "#131414" : "#ffffff";
  const subgraphStroke = isDark ? "#848989" : "#6B7070";
  const subgraphTextStyle = isDark ? ",color:#EEF4F4" : ",color:#6B7070";
  const linkStyle = isDark ? "" : "linkStyle default stroke:#848989,stroke-width:1px;";
  const highlightStyle = highlight ? `style ${highlight} stroke:#FEB6FE,stroke-width:2px` : "";
  const shape = (id, label) => `${id}["${label}"]`;
  const diagram = `
%%{init: {"themeVariables": {"fontSize": "28px"}}}%%
flowchart LR

  ${shape("WEBAPP", "Queue Export Items in Pleo's Web App")}

subgraph Pleo["Pleo API's"]
    START1[" "]
    ${shape("A", "1.Detect & Start Export Jobs")} --> ${shape("B", "2.Perform Pre-Export Validation")}
    B --> ${shape("C", "3.Retrieve Export Job Items for Processing")}
    C --> ${shape("D", "4.Fetch Export Item Data for Processing")}
end

subgraph ERP["AS/ERP"]
    START2[" "]
    ${shape("E", "5.Process & Record Export Items")}
end

subgraph Pleo2["Pleo API's"]
    START3[" "]
    ${shape("F", "6.Update Export Items")} --> ${shape("G", "7.Update & Complete Export Job")}
end
WEBAPP --> A
D --> E
E --> F

click WEBAPP "/docs/current/how-tos/accounting-integrations/how-to-queue-export-items-in-ui"
click A "/docs/current/how-tos/accounting-integrations/how-to-detect-and-start-export-jobs-for-as-erp-processing"
click B "/docs/current/how-tos/accounting-integrations/how-to-perform-pre-export-validation-for-as-erp-processing"
click C "/docs/current/how-tos/accounting-integrations/how-to-retrieve-export-job-items-for-as-erp-processing"
click D "/docs/current/how-tos/accounting-integrations/how-to-fetch-export-item-data-for-as-erp-processing"
click E "/docs/current/how-tos/accounting-integrations/how-to-determine-the-bookkeeping-method-for-as-erp-processing"
click F "/docs/current/how-tos/accounting-integrations/how-to-update-export-items-for-as-erp-processing"
click G "/docs/current/how-tos/accounting-integrations/how-to-update-and-complete-export-job-for-as-erp-processing"

style WEBAPP white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style Pleo white-space:normal,fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}
style ERP white-space:normal,fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}
style Pleo2 white-space:normal,fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}
style A white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style B white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style C white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style D white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style E white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style F white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style G white-space:normal,fill:${nodeFill},stroke:${nodeStroke}${nodeTextStyle}
style START1 fill:transparent,stroke:transparent,color:transparent
style START2 fill:transparent,stroke:transparent,color:transparent
style START3 fill:transparent,stroke:transparent,color:transparent
style Pleo fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}
style ERP fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}
style Pleo2 fill:${subgraphFill},stroke:${subgraphStroke}${subgraphTextStyle}

${highlightStyle}
${linkStyle}
`;
  return <Mermaid chart={diagram} />;
};

export const NoteCallout = ({title, children}) => <div className="callout-box callout-note">
    <div className="callout-row">
      <span className="callout-icon">
        <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M208,104a79.86,79.86,0,0,1-30.59,62.92A24.29,24.29,0,0,0,168,186v6a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-6a24.11,24.11,0,0,0-9.3-19A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24A80,80,0,0,1,208,104Z" opacity="0.2" /><path d="M176,232a8,8,0,0,1-8,8H88a8,8,0,0,1,0-16h80A8,8,0,0,1,176,232Zm40-128a87.55,87.55,0,0,1-33.64,69.21A16.24,16.24,0,0,0,176,186v6a16,16,0,0,1-16,16H96a16,16,0,0,1-16-16v-6a16,16,0,0,0-6.23-12.66A87.59,87.59,0,0,1,40,104.49C39.74,56.83,78.26,17.14,125.88,16A88,88,0,0,1,216,104Zm-16,0a72,72,0,0,0-73.74-72c-39,.92-70.47,33.39-70.26,72.39a71.65,71.65,0,0,0,27.64,56.3A32,32,0,0,1,96,186v6h64v-6a32.15,32.15,0,0,1,12.47-25.35A71.65,71.65,0,0,0,200,104Zm-16.11-9.34a57.6,57.6,0,0,0-46.56-46.55,8,8,0,0,0-2.66,15.78c16.57,2.79,30.63,16.85,33.44,33.45A8,8,0,0,0,176,104a9,9,0,0,0,1.35-.11A8,8,0,0,0,183.89,94.66Z" /></svg>
      </span>
      <div>
        {title && <div className="callout-title">
            {title}
          </div>}
        <div className="callout-body">
          {children}
        </div>
      </div>
    </div>
  </div>;

export const RememberCallout = ({title, children}) => <div className="callout-box callout-remember">
    <div className="callout-row">
      <span className="callout-icon">
        <svg width="22" height="22" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M229.66,98.34,172.39,155.8c11.46,22.93-1.72,45.86-10.11,57a8,8,0,0,1-12,.83L42.34,105.76A8,8,0,0,1,43,93.85c29.65-23.92,57.4-10,57.4-10l57.27-57.46a8,8,0,0,1,11.31,0L229.66,87A8,8,0,0,1,229.66,98.34Z" opacity="0.2" /><path d="M235.32,81.37,174.63,20.69a16,16,0,0,0-22.63,0L98.37,74.49c-10.66-3.34-35-7.37-60.4,13.14a16,16,0,0,0-1.29,23.78L85,159.71,42.34,202.34a8,8,0,0,0,11.32,11.32L96.29,171l48.29,48.29A16,16,0,0,0,155.9,224c.38,0,.75,0,1.13,0a15.93,15.93,0,0,0,11.64-6.33c19.64-26.1,17.75-47.32,13.19-60L235.33,104A16,16,0,0,0,235.32,81.37ZM224,92.69h0l-57.27,57.46a8,8,0,0,0-1.49,9.22c9.46,18.93-1.8,38.59-9.34,48.62L48,100.08c12.08-9.74,23.64-12.31,32.48-12.31A40.13,40.13,0,0,1,96.81,91a8,8,0,0,0,9.25-1.51L163.32,32,224,92.68Z" /></svg>
      </span>
      <div>
        {title && <div className="callout-title">
            {title}
          </div>}
        <div className="callout-body">
          {children}
        </div>
      </div>
    </div>
  </div>;

<WorkflowDiagramTopNav highlight="WEBAPP" />

<div className="border-[1px] rounded-none p-4 bg-[#ffffff] border-[#FEB6FE] dark:bg-[#131414] dark:border-[#FEB6FE]">
  <QueueExportItemsDiagram />
</div>

This how-to explains how to queue expenses in Pleo’s Web App so they can be picked up and processed by an accounting integration.

## Prerequisites

Before you begin:

* You have access to the Pleo Web App
* You are logged in as an **Admin** or **Bookkeeper**

## Steps

### 1. Open Exports

Select **Exports** from the main left-hand navigation.

### 2. Select expenses

Check the tickboxes next to the expenses you want to export.

### 3. Add to Export Queue

Click **Add to Export Queue** at the bottom of your screen.

<div style={{ textAlign: "center" }}>
  <img src="https://mintcdn.com/pleo-61d4d38b/Sk6KKlJRa6sMRffn/images/current/accounting-integrations/as-ui-export-add-to-export-queue.png?fit=max&auto=format&n=Sk6KKlJRa6sMRffn&q=85&s=22515177e944d551561838be6b38584a" alt="Add Export Items to Queue" width="100%" style={{ display: "block", margin: "0 auto" }} data-path="images/current/accounting-integrations/as-ui-export-add-to-export-queue.png" />
</div>

### 4. Open Export Queue

Click the **Export Queue** tab at the top of your screen.

<div style={{ textAlign: "center" }}>
  <img src="https://mintcdn.com/pleo-61d4d38b/Sk6KKlJRa6sMRffn/images/current/accounting-integrations/as-ui-export-queue-tab.png?fit=max&auto=format&n=Sk6KKlJRa6sMRffn&q=85&s=378d78788d82e0306cc49295410bceef" alt="Click Export Queue Tab" width="75%" style={{ display: "block", margin: "0 auto" }} data-path="images/current/accounting-integrations/as-ui-export-queue-tab.png" />
</div>

### 5. Confirm queued expenses

In the **Export Queue** tab, select the expenses you want to include in the export.

### 6. Create Export Job

Click **Export** at the bottom of your screen.

<div style={{ textAlign: "center" }}>
  <img src="https://mintcdn.com/pleo-61d4d38b/Sk6KKlJRa6sMRffn/images/current/accounting-integrations/as-ui-export-click-export.png?fit=max&auto=format&n=Sk6KKlJRa6sMRffn&q=85&s=8cde1bbbcbbdfb6ad33758784f80c47e" alt="Click Export Queue Tab" width="100%" style={{ display: "block", margin: "0 auto" }} data-path="images/current/accounting-integrations/as-ui-export-click-export.png" />
</div>

### 7. Export Job is created

Once you click **Export**:

* An **Export Job** is created
* The selected expenses become **Export Items**
* These items are locked and can no longer be edited

<div style={{ textAlign: "center" }}>
  <img src="https://mintcdn.com/pleo-61d4d38b/Sk6KKlJRa6sMRffn/images/current/accounting-integrations/as-ui-export-items-in-queue.png?fit=max&auto=format&n=Sk6KKlJRa6sMRffn&q=85&s=8d9dd3a8bfa3fb1b7ffb196c066fa618" alt="Click Export Queue Tab" width="100%" style={{ display: "block", margin: "0 auto" }} data-path="images/current/accounting-integrations/as-ui-export-items-in-queue.png" />
</div>

<RememberCallout title="Remember">
  Export Items cannot be modified after they are added to an Export Job.
</RememberCallout>

## Result

After completing these steps:

* An **Export Job** has been created
* The selected expenses are now **Export Items**
* These items are available for your integration to detect and process

***

## What Comes Next?

<WhatComesNext href="/docs/current/how-tos/accounting-integrations/how-to-detect-and-start-export-jobs-for-as-erp-processing">
  How to Detect and Start Export Jobs for Processing
</WhatComesNext>

***

## Related Reading

* [Export Lifecycle](/docs/current/platform/exports/lifecycle)
* [Connection and Authorisation Overview](/docs/current/integration-design/auth/integration-design-auth-overview)

***
