Hello, I am so new to VF and I am trying to create my first page. I need to create a VF page that has 2 tables in it, These tables  have 3 level of Parent-to-child relationship. The way you get to this VF page is you have a page that has all invoice numbers in it as a table when you click on any Invoice number , it should go to the VF page and ONLY shows the relevant information to that specific invoice number. Here is the information I need in these 2 tables and the Relationships:

Account(top of the tree)  ------------------------------------------------------------------------------------------------> (Account Field) Name
                   |    
                   |
                   |
                   |----------------------------->Invoice Header (Account Child)----------------------------------------> (Invoice Header Field) Invoice number 
                                                                 |                                         ----------------------------------------> (Invoice Header Field)  Order  number             
                                                                 |    
                                                                ​ |
                                                                ​ |
                                                                ​ |---------------> Invoice Line (Invoice Header Child)----------> (Invoice Line Field) Name     
                                                                                                                                               ----------> (Invoice Line Field) Description
                                                                                                                                               ----------> (Invoice Line Field) Price    
                                                                                                                                               ----------> (Invoice Line Field) Quantity


First, I was trying to make Account as controller then I figured out that you can't have more than a level of Parent-to-child relationship but the opposite can go up to 5 levels. I tried to change the controller to Invoice header and go one level down to Invoice Line and also to parent Account but I am keep getting this error for it ID : "
Id value 0M0150000008Pf1 is not valid for the CommercientSF8__SAGE300_InvoiceHeader__c standard controller 
"
I tried different ways to write the id, I tried :

?id= (ID on that specific Invoice header)      -->   ?id=00N1500000GCY4o&id=0011500001LFTw7
?id= (ID on that specific Invoice header) &id= (Invoice Line for that account) --> ?id=00N1500000GCY4o&id=0011500001LFTw7&id=15000005XKNO
?id= (Invoice header from Workbench )       -->   ?id=0M0150000008Pf1CAE

Would you please help me with that?


Here is my code : 

<apex:page standardController="Account" readOnly="true" renderAs="pdf">
<div class="bPageBlock" style="color: #4a4a56; border-color: #ececec;border-collapse: separate;">
        <div class="pbHeader" style="vertical-align: middle;color: #222; font-size: 91%;margin: 0;font-family: Arial,Helvetica,sans-serif;">
        <table border="0" cellpadding="0" cellspacing="0">
            <tbody style="display: table-row-group; vertical-align: middle; border-color: inherit; border-collapse: separate; color: #000;">
                <tr>
                    <td>
                        <h3 class="mainTitle">SAGE300 Invoice Header Detail</h3>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pbBody" style="padding: 0; margin: 0; vertical-align: top; color: #000; display: block;">
        
        <table class="detailList" border="0" cellpadding="0" cellspacing="0" style="width :100%;border: 1px solid #e0e3e5; border-color: grey;border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-spacing: 0px;">
                <tbody style="font-family: Arial,Helvetica,sans-serif;">
                    <tr> 
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Account</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" id="Acc_cell">
                           <apex:outputlink value="/{!Account.Name}">{!Account.Name}</apex:outputlink>
                        </td>
                        
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Invoice Date</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" id="inv_cell" tabindex="0">
                           <!--<apex:outputlink value="/{!inv.CommercientSF8__INVNUMBER__c}">{!inv.CommercientSF8__INVNUMBER__c}</apex:outputlink> -->
                        </td>
                    </tr>
                    
                    <tr>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;width: 18%;">Invoice Number</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                        </td>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Invoice Total With Invoice Disc.</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                        <div>a number should show up here</div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Purchase Order Number</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                            a number should show up here
                        </td>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">SHIP_TRACK</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                        
                        </td>
                    </tr>
                    <tr>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Sales Order Header</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                        <div><a href="/a1L15000003M0ig">a number should show up here</a></div>
                        </td>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">ExternalKey</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                            <div>a number should show here</div>
                        </td>
                    </tr>
                    <tr>
                        <td class="labelCol" style="text-align: right; padding-top: 3px; padding-bottom: 3px; padding-right: 10px; padding-left: 2px; font-weight: bold;font-size: 85%;">Order Number</td>
                        <td class="dataCol" style="border-right-color: #fff; padding-top: 3px; padding-bottom: 3px; width: 32%; padding-right: 16px; padding-left: 10px; text-align: left; font-size: 85%;" tabindex="0">
                        <div>a number should show here</div>
                        </td>    
                    </tr>
                </tbody>
         </table>
      
    </div>
</div>


<!--Second table-->

<div class="bPageBlock" style="width:100%; margin: 6px; background-color: #f8f8f8; padding: 0;border-collapse: separate;">
    <div class="pbHeader">
        <table border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td class="pbTitle" style="padding: 0 5px; vertical-align: middle; color: #222; font-size: 91%; width: 30%; margin: 0; font-family: Arial, Helvetica, sans-serif;">
                        <h3 id="title">SAGE300 Invoice Lines</h3>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="pbBody" id="body" style="border: 1px solid #ededed;">
        <table class="list" border="0" cellspacing="0" cellpadding="0" style="width: 100%; font-family: Arial,Helvetica,sans-serif; font-size: 91%; border: 1px solid #e0e3e5;">
            <tbody>
                <tr class="headerRow" style="background: #f2f3f3; font-size: 85%;">
                    <th scope="col" style="border-width: 0 0 1px 1px; border-color: #e0e3e5; color: #000; font-weight: bold; padding: 5px 2px 4px 5px;">Name</th>
                    <th scope="col" style="border-width: 0 0 1px 1px; border-color: #e0e3e5; color: #000; font-weight: bold; padding: 5px 2px 4px 5px;">Description</th>
                    <th scope="col" style="border-width: 0 0 1px 1px; border-color: #e0e3e5; color: #000; font-weight: bold; padding: 5px 2px 4px 5px;">Pricing Unit Price</th>
                    <th scope="col" style="border-width: 0 0 1px 1px; border-color: #e0e3e5; color: #000; font-weight: bold; padding: 5px 2px 4px 5px;">Quantity Shipped</th>
                </tr>
            <apex:repeat value="{!Account.CommercientSF8__SAGE300_Invoice_Headers__r}" var="inv">
                <!-- ListRow -->
                <tr class="dataRow" style="display: table-row; vertical-align: inherit; border-color: inherit;">
                    <td scope="row" class=" dataCell"><a href=""><apex:outputField value="{!inv.Name}"/></a></td>
                    <td class="dataCell"><apex:outputField value="{!inv.CommercientSF8__DESC__c}"/></td>
                    <td class="dataCell"></td>
                    <td class="dataCell"></td>
                </tr>
            </apex:repeat>
        </tbody>
    </table>
 
</div>
</div>

</apex:page>

Hello,

I am trying to create my first VF page that has a table, the first field of the first column is a child of Account (Account.name) . the second one (Invoice Date) is a child of that child. but for the second one I am getting this error. I tried different things but it is not working. the second part of my code is the other way that I tried but getting errors.

Would you please help me with that?

Here is my page:

<apex:page standardController="Account" readOnly="true" renderAs="pdf">
<div class="bPageBlock">
    <div class="pbBody" style="padding: 0; margin: 0; vertical-align: top; color: #000; display: block;">
        <table class="detailList" border="0.5" cellpadding="0" cellspacing="0" >
                <tbody>
                    <tr> 
                        <td class="labelCol">Account</td>
                        <td class="dataCol"  id="Acc_cell">
                            <div id="Acc_inner">
                                <apex:outputlink value="/{!Account.Name}">{!Account.Name}</apex:outputlink>
                            </div>
                        </td>
                        
                        <apex:variable var="inv" value="{!Account.CommercientSF8__SAGE300_Invoice_Headers__r}"/>
                        
                        <td class="labelCol">Invoice Date</td>
                        <td class="dataCol" >
                            <div id="inv_inner">
                              <apex:outputlink value="/{!inv.CommercientSF8__INVNUMBER__c}">{!inv.CommercientSF8__INVNUMBER__c </apex:outputlink>
                            </div>
                        </td>
                    </tr>
                </tbody>
         </table>
    </div>
</div>


<apex:pageBlock>
<apex:pageBlockSection title="SAGE300 Invoice Lines">
    <apex:pageBlockTable value="{!CommercientSF8__SAGE300_InvoiceHeader__c.CommercientSF8__SAGE300_Invoice_Lines__r}" var="inv2">
        <apex:outputField value="{!inv2.Name}"/>
        <apex:outputField value="{!inv2.CommercientSF8__DESC__c}"/>
        <apex:outputField value="{!inv2.CommercientSF8__PRIUNTPRC__c}"/>
        <apex:outputField value="{!inv2.CommercientSF8__QTYSHIPPED__c}"/>
    </apex:pageBlockTable>
 </apex:pageBlockSection>
</apex:pageBlock>

Hello,

I am trying to create my first VF page that has a table, the first field of the first column is a child of Account (Account.name) . the second one (Invoice Date) is a child of that child. but for the second one I am getting this error. I tried different things but it is not working. the second part of my code is the other way that I tried but getting errors.

Would you please help me with that?

Here is my page:

<apex:page standardController="Account" readOnly="true" renderAs="pdf">
<div class="bPageBlock">
    <div class="pbBody" style="padding: 0; margin: 0; vertical-align: top; color: #000; display: block;">
        <table class="detailList" border="0.5" cellpadding="0" cellspacing="0" >
                <tbody>
                    <tr> 
                        <td class="labelCol">Account</td>
                        <td class="dataCol"  id="Acc_cell">
                            <div id="Acc_inner">
                                <apex:outputlink value="/{!Account.Name}">{!Account.Name}</apex:outputlink>
                            </div>
                        </td>
                        
                        <apex:variable var="inv" value="{!Account.CommercientSF8__SAGE300_Invoice_Headers__r}"/>
                        
                        <td class="labelCol">Invoice Date</td>
                        <td class="dataCol" >
                            <div id="inv_inner">
                              <apex:outputlink value="/{!inv.CommercientSF8__INVNUMBER__c}">{!inv.CommercientSF8__INVNUMBER__c </apex:outputlink>
                            </div>
                        </td>
                    </tr>
                </tbody>
         </table>
    </div>
</div>


<apex:pageBlock>
<apex:pageBlockSection title="SAGE300 Invoice Lines">
    <apex:pageBlockTable value="{!CommercientSF8__SAGE300_InvoiceHeader__c.CommercientSF8__SAGE300_Invoice_Lines__r}" var="inv2">
        <apex:outputField value="{!inv2.Name}"/>
        <apex:outputField value="{!inv2.CommercientSF8__DESC__c}"/>
        <apex:outputField value="{!inv2.CommercientSF8__PRIUNTPRC__c}"/>
        <apex:outputField value="{!inv2.CommercientSF8__QTYSHIPPED__c}"/>
    </apex:pageBlockTable>
 </apex:pageBlockSection>
</apex:pageBlock>

Hi i have a requirement to re-order by pageblocktable rows as needed by using mouse drag functionality ? Can any one suggest possible methods to achieve this ?