function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Girbson Bijou 8Girbson Bijou 8 

display visual force page externally based on Filter/search

I have a custom object callled Container__c with a child called Articles_Containers__r where Item_Distributed__c in his turn the the child of Articles_Containers__r.   I want to search / filter data and display the  visualforce page externally on my website based on information provided for the Container__r object. When the user goes one  the website page he should provide the Invoice__c , Name,  Bill_of_Lading__c,  and PO__c of  a Container__c to access the VF mached with the provided information.   Actually i am able to diplay the result on the VF page inside of saleforce trough a button on the page layout(picture attached).  Please let me know all the the steps i have to follow. 
My controller
public class ContainerTrackerController
{
    public Container__c container {get;set;}
    public Map<String,List<Item_Distributed__c>> itemDistributed{get;set;}
    String containerId;
    
    
          
    
     
    public ContainerTrackerController()
    {
        container = new Container__c();
        itemDistributed = new Map<String,List<Item_Distributed__c>>();
        
        try
        {
            containerId = ApexPages.currentPage().getParameters().get('id');
            
           container = [SELECT Id,Name,DR__c, PO__c,Arrived_Date__c, Invoice__c, Pkl__c, Description__c, Container__c.Provenance__c, Percent_Distributed__c, Bill_of_Lading__c, Size_in_feet__c, Seal_No__c, 
                         (SELECT Id,Name,Prod__c,Number__c,Number_Distributed__c,Available__c,UM__c, Pending__c, Percentagedistributed__c, Lot_Number__c FROM Articles_Containers__r)
                         FROM Container__c WHERE  Id =:containerId];

            if(container != null)
            {
                Set<Id> articleContainersId = new Set<Id>();
                
                if(!container.Articles_Containers__r.isEmpty())
                {
                    for(Articles_Containers__c art :container.Articles_Containers__r)
                    {
                        articleContainersId.add(art.Id);
                        itemDistributed.put(art.Id, new List<Item_Distributed__c>());
                    }
                }
                
                List<Item_Distributed__c> lstItemDistributed = new List<Item_Distributed__c>();
                
                lstItemDistributed = [SELECT Id, Name,Product__c,Quantity__c,Delivery__c,Productt__c, Beneficiary__c, Date__c , Delivery__r.Beneficiaire__r.Beneficiary_ID__c, Delivery__r.Beneficiaire__r.Class__c, Delivery__r.Beneficiaire__r.Departement__c, Delivery__r.Beneficiaire__r.Type, Delivery__r.Beneficiaire__r.New_ID__c 
                                      FROM Item_Distributed__c WHERE  Del_Status__c='Delivered'AND Product__c IN :articleContainersId];
                
                if(!lstItemDistributed.isEmpty())
                {
                    for(Item_Distributed__c item :lstItemDistributed)
                    {
                        if(itemDistributed.containsKey(item.Product__c))
                        {
                            itemDistributed.get(item.Product__c).add(item);
                        }
                    }
                }
            }         
        }
        catch(Exception e)
        {
            System.debug(e.getMessage());
        }
    }
}





the VF Page

<apex:page showHeader="false" sidebar="false"  standardStylesheets="false" Controller="ContainerReportController"  applyBodyTag="false" >
    
    <head>
        <style type="text/css" media="print">
        
       
            tr {
            //font-family: Consolas, monaco, monospace;
           // font-weight:6px;
            font-size:10px;}
            @page {    
            @bottom-left {
            content: element(footer);
            size:letter;
       
            }
            }
            // .tablebody{
            // font-size=18px;
            // }
            
            /*   .sectionHeader {
            width: 100%;
            //background-color: #eee;
            
            font-size: 20pt;
            padding: 0px;
            margin: 15px 0px;
            font-weight: bold;
            }*/
            .head{
            width:65%;
            display: table;
            }
            .col {
            display:table-cell;
            line-height:1.1em;
            vertical-align: middle;
            }
            
            .logo{
            width: 30%;
            
            }
            .name{
            width: 70%;
            }
            .name h2, .name h6{
            margin: 0;
            padding: 0;
            margin-left: 10px;
            
            line-height: 1.1em;
            }
            
            .tableHeader {
            border-width: 1px 0px 1px 0px;
            border-color: #000;
            border-style: solid;
            }
            h4, h3{Text-align: Center;
            }
            
            table {
            width: 100%;
            }
            .centered {
            text-align: center;
            }
            
            .right {
            text-align: right;
            }
            
            .firstBlock
            {
            width: 90%; 
            margin-left: 20px;
            }
            
            
            .beneInfo{
            border-width: 1px 1px 1px 1px;
            border-style: solid;
            margin: 20px;
            
            
            }
            .SubfirstBlock{
            display:table-cell;
            width:800px;
            line-height: 1.5em;
            }
            .tableBeneinfo{
            display:table-cell;
            width:800px;
            line-height: 1.2em;
            
            }
            
            .tableBeneinfo div{
            border-top: 1px solid black;
            display: inline;
            margin-right:5px;
            width: 100px;
            text-align:center;
            }
            .footer {
            display: block;
            padding: 5px;
            position: running(footer);
            margin-bottom: 20px
            
            }
            
            .signature
            {margin-top:30px
           
            }
            
            .subfooter {
            display: inline-block;
            }
            
            .status{
            width: 30%;
            background-color: #eee;
            font-size: 12pt;
            padding: 5px;
            margin: 20px 0px;
            font-weight: bold;
            }
            
            
            
            div.right {
            float: right;
            }
            
            .pagenumber:before {
            content: counter(page);
            }
            
            .pagecount:before {
            content: counter(pages);
            }
        </style>
    </head>
    <div class="head">        
        <div class="col logo">
            <apex:image url="{!$Resource.LogoFFP}" width="140" height="60"/>
        </div>
        <div class ="col name"> 
            <h2>
                FOOD FOR THE POOR
            </h2>           
            <h6>
                14, Mapou Rte. Nationale #1, Cap Haitien, Haiti <br/>
                Tels:(+509)2208-9960/3409-5328
            </h6>
        </div>        
    </div>
    
   <h3> {!Container.Name} : DETAILED DISTRIBUTION REPORT </h3>
    
   <div class="firstBlock" > 
        
        <div class ="SubfirstBlock">
                
            <div>
                <b>Description   :</b> {!Container.Description__c}
            </div>
            
            <div>
                 <b>Packing List Number  :</b>    {!Container.Pkl__c}

            </div>
            <div>
                <b>Invoice    :</b> {!Container.Invoice__c}

            </div>
            
            <div>
                 <b>PO   :</b>    {!Container.PO__c}

            </div>
             <div>
                <b>Seal :</b> {!Container.Seal_No__c}
            </div>
            
            
            
        </div>
        <div class ="SubfirstBlock">
            <div>
            
            
                <b>Arrival Date :</b> <apex:outputtext value="{0, date, long}">
        <apex:param value="{!Container.Arrived_Date__c}"></apex:param>
    </apex:outputtext>
            </div>
            
            <div>
                <b>Provenance    :</b> {!Container.Provenance__c}
            </div>
           
            
            <div>
                <b>Size in Feet   :</b> {!Container.Size_in_feet__c}
            </div>
            <div>
                <b>Bill Of Lading    :</b> {!Container.Bill_of_Lading__c}
            </div>
            
             <div>
                 <b>Overall Distribution :</b>    {!COntainer.Percent_Distributed__c} %

            </div>
            
        </div>
    </div>
     
  
  
    <h3> DISTRIBUTION DETAILS</h3>
   
      <table style="width:100%;border-collapse: collapse;">
      
     
      <tr>
                  <td> <b>CODE </b></td>
                  <td> <b>ITEM </b></td>
                  <td> <b>UoM </b></td>
                  <td> <b>#RECEIVED </b></td>
                  <td> <b>#DISTR. </b></td>
                  <td> <b>BALANCE</b></td>
                  <td> <b>#PENDING</b></td>
                  <td> <b>%DISTR.</b></td>
                  
              </tr>
          <apex:repeat value="{!container.Articles_Containers__r}" var="article">
          
          
          
              <tr>
                  <td style="background:#000080;color:white;"><b>{!article.Name}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Prod__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.UM__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Number__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Number_Distributed__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Available__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Pending__c}</b></td>
                  <td style="background:#000080;color:white;"><b>{!article.Percentagedistributed__c} %</b></td>
                  
              </tr>
              
               <tr>
                   <td> <b> Deliv. Item Code </b></td>
                   <td> <b> Beneficiary</b></td>
                   <td> <b> #Given</b></td>
                   <td> <b> Date</b></td>
                   <td> <b> Del.Number</b></td>
              </tr>
              <apex:repeat value="{!itemDistributed[article.Id]}" var="item">
                  <tr>
                      <td>{!item.Name}</td>
                       <td>{!item.Beneficiary__c}</td>
                      <td>{!item.Quantity__c}</td>
                      
                     <td> <apex:outputtext value="{0, date, medium}">
                     <apex:param value="{!item.Date__c}"></apex:param>
                     </apex:outputtext> <br/></td>
                      
                      <td><apex:outputField value="{!item.Delivery__c}"/></td>
                  </tr>
              </apex:repeat>
          </apex:repeat>
      </table>
      
</apex:page>




 
the visualforce page with results i want access outside of salesforce