# 101 Tutorial

## How to Use the CSV Parser Component <a href="#how-to-use-the-csv-parser-component" id="how-to-use-the-csv-parser-component"></a>

[The CSV Parser Component](https://docs.avonnicomponents.com/flow/flow-components/csv-parser) allows you to import and process CSV data efficiently. Follow these steps to integrate it into your screen flow:

### **Step 1: Create Your Screen Flow** <a href="#step-1-create-your-screen-flow" id="step-1-create-your-screen-flow"></a>

Begin by creating a new screen flow.

### **Step 2: Add the CSV Parser Component** <a href="#step-2-add-the-csv-parser-component" id="step-2-add-the-csv-parser-component"></a>

Drag and drop the Avonni CSV Parser component onto your screen flow canvas.

### **Step 3: Configure the CSV Parser** <a href="#step-3-configure-the-csv-parser" id="step-3-configure-the-csv-parser"></a>

Click on "**Open Component Builder**" to start configuring the CSV Parser.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FNVYAeFce4nsu3Q6cwBky%2FJan%2012%20Screenshot.png?alt=media&#x26;token=724541b8-1a86-4379-8555-1614339c8462" alt=""><figcaption></figcaption></figure>

The most crucial step is to choose the correct **Object Name**. This tells the parser which Salesforce object (like Accounts or Contacts) your CSV data should be imported into.

Next, if your CSV data is ready, you can enter it in the **File Value** field.

If you want the parser to automatically map your CSV columns to your object fields, leave the **Hide Mapping** option checked. If you want to see and adjust the mapping yourself, uncheck it.

Finally, the **Parser Options** section lets you fine-tune how the parser interprets your CSV file. For example, you can set the character used to separate values (like a comma or semicolon) and how to handle special characters.

### **Step 4: Incorporate an Avonni Button for Navigation** <a href="#step-4-incorporate-an-avonni-button-for-navigation" id="step-4-incorporate-an-avonni-button-for-navigation"></a>

* **Add an Avonni Button Component:** This button will enable users to proceed to the next screen after completing data mappings.
* **Configure the Button:** Set a label for the button and choose any branding or additional settings as required.
* **Define the Interaction:** Go to the interaction tab in the Component Builder. Here, set up the button so that when users click it, the flow moves to the next screen. Select 'Flow Navigation Type' and then choose 'Next Screen'.

<figure><img src="https://docs.avonniflowcomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FC8DHntNhMZDi0pQcI550%252F2024-01-12_11-31-45%2520%281%29.gif%3Falt%3Dmedia%26token%3D3a22c219-469c-4761-bd8f-a8625928364f&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=bcaa0bc3d2d55dc27a72aa17693c562969ea7a88d0a2023d09eeb9d7a78edc82" alt=""><figcaption></figcaption></figure>

### **Step 5: Link a Data Element for Processing** <a href="#step-5-link-a-data-element-for-processing" id="step-5-link-a-data-element-for-processing"></a>

* **Add a Data Element:** Place a data element (like 'Create' or 'Update') below your screen element in the flow.
* **Connect to CSV Parser:** Link this data element to the records collection output of the CSV Parser component. This connection ensures that the new records are created or updated based on the data parsed from your CSV file.

<figure><img src="https://docs.avonniflowcomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FTsaqJ5jrvPKRmvUCRhG3%252F2024-01-12_11-35-40%2520%281%29.gif%3Falt%3Dmedia%26token%3D2b34b14a-a9b1-4191-9cfe-7234538c17a3&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=2781949ca9637dbc9aa9c2735a4ff2f13297541f1e20f96cb0792cd728938cd7" alt=""><figcaption></figcaption></figure>

Following these steps, you can effectively use the CSV Parser Component to import and process CSV data within your flow.

{% hint style="info" %}
**Handling Special Characters with the CSV Parser Component**

If you encounter issues with parsing special characters such as "á" while using the CSV parser component, it's likely related to the file encoding. **To prevent such problems, save your file in the UTF-8 format.** If the issue persists, double-check the encoding settings and try re-saving the file in the UTF-8 format again. This step should resolve any character parsing issues you might be experiencing.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/csv-parser/101-tutorial.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
