Salesforce Notes view VF Component

Hello geeks,

This is about a SF Notes display in view only. Actually intended for a specific profile to display notes in View only in Detail Page Layout and removing standard related list and added a custom VF page in Detail section . I came across this scenario in one of my project and i hope it would be useful for someone.

Used an OFFSET based pagination since ContentNotes doesn't allow standardsetcontroller pagination. And also to display popup used a rerender based to make component simple as possible.

Page:

	<apex:page >

	<apex:form >
	<c:NotesComponent value="{!$CurrentPage.parameters.id}" /> <!-- 0019000001JKPqi -->
	</apex:form>

	</apex:page>

view raw NotesPage.xml hosted with ❤ by GitHub

VF Component:

	<apex:component controller="NoteCompCntrlr" access="GLOBAL">

	<apex:attribute name="value" access="GLOBAL" description="The parent record ID of the Notes"
	type="string" assignTo="{!selectedValue}"/>

	<apex:slds />

	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>


	<script>


	$(document).ready(function () {
	doInitReviewPnl();
	});

	function doInitReviewPnl(){



	$("a[id^=show_]").click(function(event) {
	$("#extra_" + $(this).attr('id').substr(5)).slideToggle("fast");
	event.preventDefault();
	})



	}



	</script>

	<apex:outputpanel id="scriptPnl">
	<script>

	doInitReviewPnl();
	</script>
	</apex:outputpanel>

	<apex:outputpanel id="resPanel">
	<!-- SEARCH RESULTS HEADER -->
	<div class="slds-page-header" role="banner">
	<div class="slds-grid">
	<div class="slds-col slds-has-flexi-truncate">
	<!-- HEADING AREA -->
	<p class="slds-text-title--caps slds-line-height--reset">

	<span class="slds-icon_container slds-icon-standard-record slds-icon--small" title="Account Standard Icon">
	<img src="{!URLFOR($Asset.SLDS, 'assets/icons/standard/note_120.png')}" alt="Account Standard Icon" />
	</span>  Notes</p>
	<!-- / HEADING AREA -->
	</div>
	</div>
	</div>
	<!-- / SEARCH RESULTS HEADER -->


	<!-- SEARCH RESULTS TABLE -->
	<div class="slds-panel slds-grid slds-grid--vertical slds-nowrap">
	<div class="slds-form--stacked slds-grow slds-scrollable--x">

	<table id="theaddrs" class="slds-table slds-table--bordered slds-table--cell-buffer">
	<thead>
	<tr class="slds-text-title--caps">
	<th scope="col">
	<div class="slds-truncate" title="Action">Action</div>
	</th>

	<th scope="col">
	<div class="slds-truncate" title="Title">Title</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Text Preview">Preview</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Owner">Owner</div>
	</th>
	<th scope="col">
	<div class="slds-truncate" title="Created">Created Date</div>
	</th>


	</tr>
	</thead>
	<tbody>
	<apex:repeat value="{!AllNotes}" var="noteObj">
	<tr>
	<td scope="row" data-label="Opportunity Name">
	<div class="slds-truncate" title="Edit">
	<apex:commandLink action="{!showContent}" style="color: blue;" value="Show Content" id="idAgregar" rerender="popupArea,popupContent">
	<apex:param name="crntRec"
	value="{!noteObj.cNote.Id}"
	assignTo="{!curentRecId}"/>

	</apex:commandLink>

	</div>


	</td>

	<td >
	<div class="slds-truncate" ><apex:outputField value="{!noteObj.cNote.Title}"/></div>
	</td>

	<td >



	<a href="#" id="show_{!noteObj.cNote.Id}"><apex:outputField value="{!noteObj.cNote.TextPreview}"/></a>
	<div id="extra_{!noteObj.cNote.Id}" style="display: none;">
	<apex:outputField value="{!noteObj.cNote.TextPreview}"/>
	</div>

	<!-- <div class="slds-truncate" ><apex:outputField value="{!noteObj.cNote.TextPreview}"/></div> -->
	</td>
	<td >
	<div class="slds-truncate" ><apex:outputField value="{!noteObj.cNote.owner.name}"/></div>
	</td>
	<td >
	<div class="slds-truncate" ><apex:outputField value="{!noteObj.cNote.CreatedDate}"/></div>
	</td>



	</tr>
	</apex:repeat>
	</tbody>
	</table>
	<br/><br/>

	<div class="slds-box slds-box--small slds-theme--shade slds-text-align--left">
	<div class="slds-align_absolute-center">

	<apex:commandButton styleclass="slds-button slds-button--neutral" value="First" status="pageStatus1" reRender="resPanel,scriptPnl" action="{!beginning}" disabled="{!prev}" title="First Page"/>

	<apex:commandButton styleclass="slds-button slds-button--brand" value="Previous" status="pageStatus1" reRender="resPanel,scriptPnl" action="{!previous}" disabled="{!prev}" title="Previous Page"/>

	<apex:commandButton styleclass="slds-button slds-button--brand" value="Next" status="pageStatus1" reRender="resPanel,scriptPnl" action="{!next}" disabled="{!nxt}" title="Next Page"/>


	<apex:commandButton styleclass="slds-button slds-button--neutral" value="Last" status="pageStatus1" reRender="resPanel,scriptPnl" action="{!end}" disabled="{!nxt}" />


	<apex:actionStatus id="pageStatus1">
	<apex:facet name="start">
	<apex:outputPanel >
	<apex:image url="{!$Resource.loaderSmaill}" />
	<apex:outputLabel />
	</apex:outputPanel>
	</apex:facet>
	</apex:actionStatus>


	</div>

	</div>

	</div>
	</div>
	</apex:outputpanel>


	<apex:outputpanel id="popupArea">
	<!--Use "slds-m-around- -xx-large" class to add standard Large padding to the component-->
	<div class="slds-m-around--xx-large">


	<!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->
	<apex:outputpanel id="popupContent" rendered="{!isOpen}">

	<!--###### MODAL BOX Start From Here ######-->
	<div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
	<div class="slds-modal__container">
	<!-- ###### MODAL BOX HEADER Part Start From Here ######-->
	<div class="slds-modal__header">
	<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="closeModel();return false;">
	X
	<span class="slds-assistive-text">Close</span>
	</button>
	<h2 id="header99" class="slds-text-heading--medium">{!curentRec.Title}</h2>
	</div>
	<!--###### MODAL BOX BODY Part Start From Here ######-->
	<div class="slds-modal__content slds-p-around--medium">
	<p><b><apex:outputtext value="{!fullContent}" escape="false"/>
	</b>
	</p>
	</div>
	<!--###### MODAL BOX FOOTER Part Start From Here ######-->
	<div class="slds-modal__footer">

	<button class="slds-button slds-button--brand" onclick="closeModel();return false;">Cancel</button>
	</div>
	</div>
	</div>
	<div class="slds-backdrop slds-backdrop--open"></div>
	<!--###### MODAL BOX Part END Here ######-->

	</apex:outputpanel>
	</div>


	</apex:outputpanel>




	<apex:actionfunction name="closeModel" action="{!closeAction}" rerender="popupArea,popupContent" />


	</apex:component>

view raw NotesComp.xml hosted with ❤ by GitHub

Apex Cls:

	public class NoteCompCntrlr
	{
	public String soql;
	public String option {get;set;}
	public String lsourceoption {get;set;}
	public integer totalRecs {get;set;}
	private integer index = 0;
	private integer blockSize = 5;
	private list<string> cDocIds;
	public string curentRecId{get;set;}
	public boolean isOpen{get;set;}
	public string fullContent{get;set;}
	public contentNote curentRec{get;set;}
	public string RecIdParent{get;set;}
	public String selectedValue {
	get;
	set {

	selectedValue = value;

	if(string.isNotBlank(selectedValue)){
	RecIdParent = selectedValue;
	initContentDocs();
	}

	}
	}


	public NoteCompCntrlr()
	{

	system.debug('--selectedValue -- '+selectedValue );
	isOpen = false;
	curentRecId = '';
	fullContent ='';

	}

	private void initContentDocs(){

	if(cDocIds==null){
	cDocIds = new list<string>();
	list<contentNote> totalNotes = new list<contentNote>();

	if(string.isNotBlank(RecIdParent)){

	for(ContentDocumentLink CLink : [ select ContentDocumentId from ContentDocumentLink
	where LinkedEntityId =: RecIdParent] ){
	cDocIds.add(CLink.ContentDocumentId);


	}
	String qryStr = 'select id,CreatedDate,FileExtension,FileType,owner.name,Title,TextPreview from contentNote where Id IN: cDocIds AND FileType=\'SNOTE\'';

	totalNotes = Database.Query(qryStr);

	}
	totalRecs = totalNotes.size()>0 ? totalNotes.size() : 0;

	}

	}




	public List<contentWrap> getAllNotes() {
	list<contentWrap> cNotes = new list<contentWrap>();

	if(cDocIds==null ){
	initContentDocs();
	}

	String qryStr = 'select id,Content,CreatedDate,FileExtension,FileType,owner.name,Title,TextPreview from contentNote where Id IN: cDocIds AND FileType=\'SNOTE\'';
	qryStr+= ' LIMIT ' + blockSize + ' OFFSET ' + index;



	for(contentNote cntNote : Database.Query(qryStr)){

	contentWrap tempNote = new contentWrap();
	tempNote.txtForm = '';
	tempNote.cNote = cntNote;
	cNotes.add(tempNote);
	}
	return cNotes;
	}




	public List<SelectOption> getROptions() {
	List<SelectOption> rOptions = new List<SelectOption>();
	rOptions.add(new SelectOption('None','-None-'));
	Schema.DescribeFieldResult fieldResult = Lead.Rating.getDescribe();
	List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
	for( Schema.PicklistEntry f : ple)
	{
	rOptions.add(new SelectOption(f.getLabel(), f.getValue()));
	}
	return rOptions;
	}


	public void beginning()
	{
	index = 0;
	}

	public void previous()
	{
	index = index - blockSize;
	}

	public void next()
	{
	index = index + blockSize;
	}

	public void end()
	{
	index = totalrecs - math.mod(totalRecs,blockSize);
	}

	public boolean getprev()
	{
	if(index == 0)
	return true;
	else
	return false;
	}

	public boolean getnxt()
	{
	if((index + blockSize) >= totalRecs)
	return true;
	else
	return false;
	}
	public class contentWrap {

	public string txtForm{get;set;}
	public contentNote cNote{get;set;}



	}

	public void showContent(){
	system.debug('--curentRecId-- '+curentRecId);

	if(string.isNotBlank(curentRecId)){
	list<contentNote> noteList = [select id,Content,title from ContentNote where id=: curentRecId];
	curentRec = noteList.size()>0 ? noteList[0] : new contentNote();

	isOpen = curentRec.Id!=null;
	fullContent = '';
	if(isOpen){
	fullContent = curentRec.Content.toString();
	}
	system.debug('fullContent-- '+fullContent);
	system.debug('---curentRec--- '+curentRec);
	}

	}

	public void closeAction(){

	isOpen = false;
	}





	}