Display Attributes on an Object Page

You can add an Attributes component to the Visualforce page for any object that supports attributes. For example, you can display Attributes that capture information about Opportunities.

1. From Setup, type Pages in Quick Find, then click Visualforce Pages.
2. Click New.
3. Add a Label and Name, for example, OpportunityAttributesPage.
4. Check the box labeled Available for Lightning Experience, Lightning Communities, and the mobile app.
5. In the Visualforce markup section, add the following code:

   <apex:page showheader="false" sidebar="false" standardcontroller="ObjectAPIName"> 
     <apex:stylesheet value="{!URLFOR($Resource.NS__bootstrap, '/bootstrap-3.2.0-dist/css/sfboot.min.css')}"> 
       <NS:SegmentComponent > </NS:SegmentComponent>
     </apex:stylesheet>
   </apex:page>

6. Replace ObjectAPIName with the API name of the object to which you want to add Attributes, for example, Opportunity.
7. Replace NS with the Namespace prefix of the installed package, which is located in Setup > Installed Packages. If there is no namespace, omit the NS instances and the colons that follow.
8. Click Save.
9. Click Visualforce Pages again to return to the list of pages.
10. Next to the new page, click Security.
11. Grant access to the profiles that need access to the new page, then click Save.
12. Navigate to the page for the object. For example, go to the Opportunities tab and click one of the Opportunity names.
13. Select Edit Layout.
14. In the Layout Editor, scroll the pane at the top left that begins with Fields, Buttons, Custom Links, and so on until you see Visualforce Pages.
15. Click Visualforce Pages.
16. Drag your new Visualforce component onto the layout.
17. Click Save.