# SharinPix Image Gallery (Document Builder)

The **SharinPix Image Gallery** component works with Salesforce Field Service to help create professional PDF service documents, including images. Using the Document Builder, you can easily make documents with images to fit your business needs.

{% hint style="info" %}
**Prerequisites**

Before using the **SharinPix Image Gallery**, make sure that you:

1. Activate Document Builder in your org
2. Give users access to Document Builder
3. Assign Document Builder to Dispatchers and Mobile Workers
4. Install the SharinPix Field Service package
5. Have the SharinPix package version 1.308 or above installed on your org (**note:** [How to upgrade SharinPix package](https://app.gitbook.com/s/i8tH1o5AHthxksYgF6ij/how-to-update-sharinpix-package-from-the-appexchange))
   {% endhint %}

## 1. Activating the Document Builder feature

1. From *Setup*, enter and select **Field Service Settings** in the *Quick Find* box.
2. Select **Enable Document Builder**.

A notification will inform you that Salesforce is registering your org. You will receive an email notification a few minutes later letting you know when you are registered. After you’ve registered, you can start [creating Service Document templates](#create-a-service-document-template).

{% hint style="warning" %}
**Note:** Only Salesforce admins with access to the Setup menu, can access the builder experience and build Service Document templates.
{% endhint %}

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FNXsxkTAJda01WeCefp6a%2Fimage%20(73).png?alt=media&#x26;token=de2cd967-5977-4ee3-b39f-5bc3d8402d30" alt=""><figcaption></figcaption></figure>

## 2. Give Users Access to Document Builder

1. From *Setup*, enter Users, and then select **Permission Sets**, in the *Quick Find* box.
2. Find and assign the following permission sets to Field Service technicians, dispatchers, and admins:
   * **Field Service Document Builder Dispatcher**,&#x20;
   * **Field Service Document Builder Mobile**, and
   * **Field Service Document Builder Standard**
3. To assign the permission sets to users, select **Manage Assignments**.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FZadPD9MyvlUyamXh7ECG%2Fimage%20(74).png?alt=media&#x26;token=537c395e-fa3c-4eb0-b7c1-a5e2045a5fb5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note:**

Users who have been assigned the above permission sets no longer have access to Service Reports, and the Create Service Report button.
{% endhint %}

### 3. Assign Document Builder to Dispatchers and Mobile Workers <a href="#assign-document-builder-to-dispatchers-and-mobile-workers" id="assign-document-builder-to-dispatchers-and-mobile-workers"></a>

1. From *Setup*, enter and select **Permission Sets**, in the *Quick Find* box
2. Create a permission set by clicking on the **New** button.
3. Give it a name, for example, *Field Service Document Builder*.
4. Leave the License picklist field blank, and then save your changes.
5. Scroll down to the **System** section and click **System Permissions**.
6. Click **Edit**, select **Document Builder**, and **Access Lightning Web Components for Field Service Mobile**, then save your changes.
7. Assign this permission set to users by clicking **Manage Assignments**.

## 4. Installing the SharinPix Field Service Package

Use the following link to install the SharinPix Field Service package if it's not installed already: [SharinPix Field Service package install link](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tVX000001NLMXYA4)

## Create a Service Document Template

Once the Document Builder is activated and relevant permission sets are assigned to your users, you can create Service Document templates as explained below.

* From *Setup*, enter and select **Document Builder**, in the Quick Find box

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FuWPImE6ECbwlvAtsWh9Q%2Fimage%20(75).png?alt=media&#x26;token=299855be-0e4f-4197-aa57-81aea967c43b" alt=""><figcaption></figcaption></figure>

* To create a template, click **New Template**.
* Add a label to indicate the type of Service Document you’re creating, for example, *Service Appointment Debrief*.
* Select any object from the dropdown list: **Work Order**, **Work Order Line Item**, or **Service Appointment**. Your selection dictates which object the template is created from and which fields and related lists appear in Document Builder.&#x20;
* Click Next.
* Choose between a blank template and a standard default template. **Note:** A standard template gives you a starting point with added fields and related lists.

You are now ready to start building your Service Document!

## Configuring the SharinPix Image Gallery Component.

{% hint style="danger" %}
**Prerequisite:**\
Make sure you have images on the records for which you are creating the Service Document and that [SharinPix Image Sync](https://docs.sharinpix.com/documentation/image-sync/setup-sharinpix-image-sync) is activated for your object. Please note that no images will be available for the report without the *SharinPix Image Sync* feature being activated.
{% endhint %}

To add and configure the *SharinPix Image Gallery* component on the Document Builder, proceed as follows:

* On the Document Builder page, search for **SharinPix Image Gallery** and drag and drop the component onto the Service Document where desired.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FCv5KtXtjEvtcgDzhiGaw%2Fimage%20(76).png?alt=media&#x26;token=699841b9-f536-40e8-b45f-ac3cf0c583b5" alt=""><figcaption></figcaption></figure>

### Component Parameters & Configurations

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FSBVIZrgoITEPNvoBybXo%2Fimage%20(77).png?alt=media&#x26;token=689d3445-e16a-406b-a38d-0909063bb18e" alt=""><figcaption></figcaption></figure>

Configure the component's parameter as follows:

* **Number of Columns**: Choose the number of columns to be included in your document.
* **Image URL field**: Select the desired image size using the **Image URL field** parameter. The parameter's values are:
  * **Image Original:** corresponds to the original size.
  * **Image Mini:** corresponds to a size of 100 x 100 pixels.
  * **Image Thumbnail:** corresponds to a size of 200 x 200 pixels.
  * **Image Full:** corresponds to a size of 1920 x 1280 pixels.
* **Filter Tags**: Add tags separated by the semicolon(;) character. Images will be displayed in the SharinPix Image Gallery based on your input tags. Leave the field blank to display all images.
* **Sections by Tags:** Use this to organize images into sections based on their tags. Enter multiple tags separated by a semicolon (e.g., Tag1;Tag2;Tag3). Each tag will create a separate section displaying images with that tag. If left blank, all images will appear together without any grouping.

{% hint style="success" %}
**Tip:**

You can also customize and generate image URLs with the desired image size using the *SharinPix Transformation* feature. For detailed steps on how to do so, please see: [SharinPix Transformation - get your images automatically resized!](https://docs.sharinpix.com/m/documentation/l/1045753-sharinpix-transformation-get-your-images-automatically-resized)
{% endhint %}

## Generating a Service Document

To generate the PDFs from the desktop site:

* **Create Service Document:**
  * Go to the Quick Action section in your record and find the **Create Service Document** action.
  * Click **Create Service Document**.
* **Create PDF:**
  * Click **Create PDF**. You will get a popup message indicating that your request is queued.
  * When your PDF is ready, you will receive a notification under the Global Notifications bell.
* **Access PDFs:**
  * To access the PDFs you create, including an archive of your PDFs, navigate to the work order and click the **Related** tab.
  * Scroll down to **Service Reports**.
* **View PDF:**
  * To view your PDF, click a service report name in the list view.

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F0K5psm2mJOkFaQtIiTcX%2Fimage%20(78).png?alt=media&#x26;token=e407e514-317c-4efa-8bf7-96cb436a3cb8" alt=""><figcaption></figcaption></figure>

To use Document Builder on the Field Service mobile app, enable push notifications on your device. Push notifications will inform you when your PDF is ready or if there are any errors.

1. **Open a Work Order:** Go to a work order, work order line item, or service appointment. In this example, we use a work order.
2. **Create Service Document:** Click the Actions launcher and select **Create Service Document**.
3. **Preview and Collect Signature:** You will be redirected to a preview of the Work Summary template. This template shows customer details and the work completed, and prompts you to collect a customer signature.
   * Collect the customer signature by having them type and sign their name.
   * If you can’t collect the signature, click **Can’t Collect Signature** and provide a reason, such as the representative not being present.
4. **Save and Generate Document:** Click **Save**, then click **Generate Document** on the following window.
   * A popup will notify you when the document generation is complete. If you don’t see a popup and the process is taking a long time, pull down to refresh the page. If you’re offline, your document will be added to a queue.
5. **View the PDF:** Click the notification to return to the Field Service mobile app, where you can see the final PDF of the work summary. This PDF is accessible from the **Overview** tab on the given work order.

## Demo: See the generated report with SharinPix images in action!

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2F0FewZ1wx9dVNEC4a3WFn%2Fimage%20(79).png?alt=media&#x26;token=b3878b44-4af5-418f-abd2-c0248a91937f" alt=""><figcaption></figcaption></figure>

## Demo: Sections By Tags

<figure><img src="https://2221230591-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5EvYRrLbUyvRh8o1jmMG%2Fuploads%2FF0qtjRqGW0cJfXaag6fJ%2Fimage%20(80).png?alt=media&#x26;token=deb9a5de-f17a-495e-9212-a28879d1dd12" alt=""><figcaption></figcaption></figure>