XfilesPro

Use XfilesPro on Classic

    Home / Classic – Use…

Classic – Use XfilesPro on Classic

How to view XfilesPro on Classic
Let’s say we configured an external storage an object, say Accounts.
We have an account created – Burlington Poly Industries. In the below screen, we can see that it’s just a regular classic screen.

We will now create a new visualforce page and add it to the object layout.

How to:

  1. Go to Setup-Quick Find and search for Visualforce Page.
  2. When you get Visualforce Pages in the search results, click on ‘Visualforce Pages’
  3. When the Visualforce Pages screen comes up, click on NEW.
    1. IMP: Let’s say we have standard object: Account then we suggest to name the VF page as AccountAttachments
    2. This is only for identification purpose and it’s easy to remember which VF page is dedicated to what objects.
  4. Once you set a name, enter the following code into the VF page-
<apex:page showHeader="false" standardController="Account" standardStylesheets="false">
    <xfiles:XFileList recordId="{!Account.Id}" />
</apex:page>

Where Account is the API name of the standard object.

Check the box which says – ‘Available for Salesforce mobile apps and Lightning Page’

We will use this VF page in our standard object page layout section. Below are the steps to add visualforce page to a standard object –

  1. Go to your standard object and open an existing record. If you do not have a record in your standard object, then please create one and open that record. In the below screenshot you can see that I opened a record in standard object – Account
  2. Click on Edit Page Layout of the record and you will see the below screen.
  3. On the top of the screen, you will see Visualforce pages in Enhanced Page Layout Editor. Drag ‘Section’ and place it on the object layout.
    1. Enter name: Attachments.
    2. Uncheck Detail Page
    3. Uncheck Edit Page
    4. Select 1-column layout and click on OK.
  4. Drag and drop : AccountAttachments into Attachments section and click on SAVE
  5. After clicking on SAVE, you will be able to see the XfilesPro component on your standard object. See the screenshots below –

When you click on SAVE, it redirects to the record layout where you can see the Attachments section with UPLOAD FILES & VIEW ALL options.

 

Let us upload some files in the record and see how XfilesPro works.

As you can see a progress bar which indicates that the file is getting uploaded.
Once the file is uploaded, it will show a checkmark and the DONE button will highlight. Let’s click on DONE.
Click on the file to see how the file previews. You can see a file getting previewed when you click on it.
You can also see few options like DOWNLOAD & DELETE which will allow us to download and delete files respectively.
Congratulations! You can now upload files seamlessly on any object through XfilesPro.

Extra features – XfilesPro can be triggered through buttons!

Let’s say you have a lot of fields in your record in a standard/custom object and so, obviously you will get the Attachments section at the bottom of the page. In this situation, you will have to keep scrolling down to look for the Attachments section. We can help you reduce this by adding a button here. This button will perform the same way XfilesPro section works. See the below screenshot –

To create this button, we need to have

  1. A visualforce page and
  2. A custom button created

Create a new visualforce page by updating the following information –

If you are on Classic, please go to Setup and search for VisualForce Pages and click on NEW to create a new visualforce page.

If you are not on Classic view, then please switch to classic view and go to Setup and search for VisualForce Pages.click on NEW to create a new

Click on NEW to create a new visualforce page and update the following information –

Name: AccountAttach(if your object is Account)

Place the below code:

<apex:page showHeader="false" standardController="Account" standardStylesheets="false">
    <xfiles:XFileList recordId="{!Account.Id}" />
</apex:page>

Where Account  is the API name of the standard object.

Check the box which says – ‘Available for Salesforce mobile apps and Lightning Page’

Click on SAVE.

 

  • Create a new custom button on your standard object by updating the following information –
  • If you are on Classic, please go to Setup and search for Objects.
  • Click on Objects and click on your standard object and scroll down to create a new button.
  • Create a new button with the following information
    • Name: Upload
    • Display Type: Detail Page Button
    • Set the behaviour: Execute JavaScript
    • Place the below code:
var w=650,h=450;

var left = (screen.width/2)-(w/2);

var top = (screen.height/2)-(h/2);

var url = '/apex/AccountAttach?id={!Account.Id}';

window.open(url, 'Attachment: {!Account.Name}', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

Where AccountAttach is the VF page name we created before.

Where Account is the API name of the standard object.

Click on SAVE.

Now that we have a VF page & a custom button created, let us insert this button in the page layout.

  • Go to your standard object, Account and open an existing record.
  • Click on ‘Edit Page layout’ and drag and drop the standard button:Upload we created.
  • Check if you have VF page:AccountAttachments in section:Attachments. If not, drag and drop VF page:AccountAttachments in section:Attachments.
  • Click SAVE

Congratulations! You now have a new button UPLOAD through which you can upload files. Your Classic screen with the XfilesPro UPLOAD button will appear like the below screen –