> For the complete documentation index, see [llms.txt](https://docs.sharinpix.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sharinpix.com/documentation/features/main-integration/using-on-salesforce-flow-developer-skills-required.md).

# Using on Salesforce flow (Developer skills required)

{% hint style="info" %}
This demo only serves as a broad example on how **SharinPix** be used in Salesforce Flow. You are not restricted to using **Contacts** or **Accounts** objects. To get a technical grasp on how the VisualFlow was implemented, please head over to the Cookbook section: [Create Contacts from an Account using VisualFlow](/documentation/cookbook/create-contacts-from-an-account-using-visualflow.md)
{% endhint %}

In this demo, we will see how it possible to create one or more **Contacts** starting from a particular **Account** record and upload a profile picture corresponding to the **SharinPix Album** for each newly-created **Contact** record.

## Overview

To implement the present demo, we will reference a **Visual Flow** inside a **Visualforce Page**. The following steps provide a high-level overview of the objective we want to achieve in this demo:

**Visual Flow:**

1. Look up the **Id** of Account Record from which the Screen Flow was launched.
2. Display the input fields to so as to create the **Contact** record(s) while using the **Account Id** (collected in the previous step) in order to create a **LookUp relationship** between the **Account** and the recently-created **Contact** record(s).
3. Display the **SharinPix Album** for the user to upload the profile picture of the newly-created **Contact(s).**

**Visualforce Page:**

4\. Reference the newly-created **Flow** inside a **Visualforce Page.**

**Account Page-Layout:**

5\. Create a **custom action** to launch the **Visualforce Page** created in the previous step.

6\. Add the custom action to the Account's **page-layout.**

## Integrating SharinPix with the VisualFlow

In order to be able to use the SharinPix Album alongside a VisualFlow, we references both the SharinPix Album and the VisualFlow inside a custom Visualforce Page.

The code snippet below shows how both the VisualFlow and SharinPix Album is referenced inside a Visualforce Page.

```html
<apex:page StandardController="Account" extensions="FlowController">
<flow:interview name="SharinPix_Account_Contacts" interview="{! sp_flow }" finishLocation="/{!$CurrentPage.parameters.Id}"></flow:interview>
<sharinpix:SharinPix height="400px" rendered="{! sp_flow.RenderAlbum == true }" parameters="{'Id': '{! sp_flow.ContactId }', 'abilities':{'{! sp_flow.ContactId }':{'Access': {'image_upload':true,'image_list':true,'see':true,'image_delete':true}}}}" />	
</apex:page>
```

* The code snippet below references a **VisualFlow**.

```html
<flow:interview name="SharinPix_Account_Contacts" interview="{! sp_flow }" finishLocation="/{!$CurrentPage.parameters.Id}"></flow:interview>
```

* As it can bee seen above, the flow element has the following properties:
  * **Name:** the name of the flow created.
  * **Interview:** a reference to the flow interview as declared in the Apex Controller of the current Visualforce Page. This reference will allow us to access the variables found in the flow.
* The code snippet below references the **SharinPix Visualforce Component**.

```html
<sharinpix:SharinPix height="400px" rendered="{! sp_flow.RenderAlbum == true }" parameters="{'Id': '{! sp_flow.ContactId }', 'abilities':{'{! sp_flow.ContactId }':{'Access': {'image_upload':true,'image_list':true,'see':true,'image_delete':true}}}}" />	
```

As it can be seen in the above code snippet, the SharinPix Visualforce Component has the properties:

* **height:** corresponds to the height of the SharinPix Album as rendered inside the SharinPix Visualforce Component.
* **rendered:** corresponds to the Boolean flag that dictates whether the SharinPix Visualforce Component is to be rendered, hence displayed on the Visualforce Page.
* **parameters:** corresponds to the set of SharinPix Abilities enabled/disabled on the SharinPix Album.

The code snippet below shows the implementation of the Apex Class used as the controller for the Visualforce Page implemented above.

```apex
public class FlowController {
    public Flow.Interview.SharinPix_Account_Contacts sp_flow { get; set; }
    public FlowController (ApexPages.StandardController controller) {}
}
```

The declared variable **sp\_flow** represents the reference for the Flow. It will allow us to access the variables present within the flow.

For example, within the **SharinPix Visualforce Component** referenced inside the Visualforce Page, shown above, uses the Flow reference to access the following variables:

* **sp\_flow\.RenderAlbum:** The **RenderAlbum** variable is used to dictate whether the SharinPix Visualforce Component is to be displayed or not on the Visualforce Page.
* **sp\_flow\.ContactId:** The **ContactId** variable is used to associate the SharinPix Album to the relevant Contact Record.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.sharinpix.com/documentation/features/main-integration/using-on-salesforce-flow-developer-skills-required.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
