SharinPix integration with TaskRay

The present article will outline the steps on how to integrate SharinPix within TaskRay without an Apex Class Controller. To be more precise, a new custom tab will be added to the task modal and the SharinPix album will be added to the Task pane. The final result is shown below.

Install TaskRay

The following link will guide you towards the installation instructions for the TaskRay package: instructions.

Visualforce Integration

  1. From Setup, navigate to:


    • Lightning:  Custom Code | Visualforce Pages

    • Classic:  Develop | Visualforce Pages

Click on New. Inside the label field enter SampleSharinPixPage. Paste the code below.

<apex:page >
    <SharinPix:SharinPix height="500px" 
                         parameters="{
                         	'Id': '{!$CurrentPage.parameters.Id}', 
                            'abilities':{'{!$CurrentPage.parameters.Id}':{
                            'Access': {
                            	'image_upload':true,
                                'image_list':true,
                                'see':true,
                                'image_delete':true
                                }
							  }
						    }
                         }"
	/>
</apex:page>
Click to copy

Add Custom Tab

Add Custom Tabs to Project and Task Panes [Admin]

To configure custom tabs on Project or Task Details, you will be required to access TaskRay Global Settings and fill two fields: (1) a field containing the label of the tab (2) a field containing the URL of the Visualforce page being referenced inside the Task Pane.

  1. From Setup, navigate to:


    • Lightning: Custom Code | Custom Settings 

    • Classic: Develop | Custom Settings 

  3. Click Manage next to TaskRay Global Settings.

  4. Click on Edit inside the TaskRay Global Settings view.

Locate the Task Modal Custom Tab 1 Label.

5. Enter the label of the Custom tab. In our case it should be SharinPix.


6. Locate the Task Modal Custom Tab 1 URL. Enter the URL of the Visualforce page you want to reference within the Task Details pane. In this case, we will reference the Visualforce page we created in the previous section.


7. The URL should have the following components:


  • This part contains the name of the Visualforce page with a namespace prefix (relevant to the current org) prepended to it. In this case, ‘c__’  is used since the current org does not possess its own namespace prefix.

  • This part refers to the parameter/value pair passed to the referenced Visualforce page.

The symbol $id refers to the identifier for the current task being viewed. In our case, it will allow us to display the images relevant/belonging  only to this task. The id symbol refers to any arbitrary value containing the value for $id.

8. Finally click on Save.

9. Access the TaskRay app and select the TaskRay tab.

10.  Create a new Project.

11. Enter a name for the project. Click on Save & Close.

12. Add new task.

13. Click on New Task. When the modal appears,  click on Save.

14. Select the SharinPix tab.

15.  The SharinPix album appears.