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
Sharp BESharp BE 

Automatically update record when specific field is changed - Visualforce page upgrade

Hi all, 

Currently we are working with some Visualforce pages where we have a visualization with checkboxes which high level milestones are achieved within a project. 

The initial set-up was created with a Visualforce page embedded in an seperate tab within a Project record (custom object).
Now I want to upgrade this Visualforce page to be more easier to be more user friendly. 

Each time an user updates the checklist they need to click on the "Save" button which is integrated in the Visualforce page. Would it be possible to create a Lightning Component of this set-up so each time that a value changes the record updated automatically only that particular field? So that the user is not required to press the "save" button. 

Converting it to a Lightning Component would be a more visual thing, as embedded Visualforce pages are somewhat not matching with the overall style.

Current Visualforce code:
<apex:page standardController="Project__c" extensions="RPIRequestExtension" sidebar="false" showHeader="false" showChat="false" lightningStylesheets="true">
    
    <apex:form >
    <apex:pageBlock >
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save"/>
        </apex:pageBlockButtons>
        
        <script>function setFocusOnLoad() {}</script>
    
    <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border:none;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:3px 20px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:3px 20px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;}
.tg .tg-fwlz{font-weight:bold;font-size:12px;background-color:#bbdaff;text-align:center;vertical-align:center}
.tg .tg-41g0{font-weight:bold;font-size:12px;background-color:#bbdaff;text-align:center}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-mtwr{background-color:#bbdaff;vertical-align:top}
.tg .tg-0e45{font-size:11px;left-margin:-30px}
.tg .tg-0e49{font-size:11px;vertical-align:top;background-color:#fcfdff}
.tg .tg-yw4l{vertical-align:top}
.tg .tg-c7d0{background-color:#bbdaff}
.tg .tg-q19q{font-size:11px;vertical-align:top}
</style>
<center><table class="tg" style="undefined;table-layout: fixed; width: 712px">
<colgroup>
<col style="width: 41px"></col>
<col style="width: 245px"></col>
<col style="width: 63px"></col>
<col style="width: 21px"></col>
<col style="width: 100px"></col>
<col style="width: 200px"></col>
</colgroup>
  <tr>
    <th class="tg-031e"></th>
    <th class="tg-yw4l"></th>
    <th class="tg-031e"></th>
    <th class="tg-yw4l"></th>
    <th class="tg-yw4l"></th>
  </tr>
  <tr>
    <td class="tg-41g0">N/A</td>
    <td class="tg-41g0" colspan="2">Scoping</td>
    <td class="tg-c7d0"></td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Scope_document_approved_n_a__c}"/></td>
    <td class="tg-0e45">Scope document approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Scope_document_approved__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Project_team_assigned_n_a__c}"/></td>
    <td class="tg-0e45">Project team assigned</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Project_team_assigned__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.High_level_planning_approved_n_a__c}"/></td>
    <td class="tg-0e45">High level planning approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.High_Level_Planning_Approved__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Project_i_n_a__c}"/></td>
    <td class="tg-0e45">Project invoice in finance file</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Project_invoice_in_finance_file__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-41g0"></td>
    <td class="tg-41g0" colspan="2">Concept</td>
    <td class="tg-c7d0"></td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Product_onboarding_n_a__c}"/></td>
    <td class="tg-0e45">Product onboarding</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Product_onboarding__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.CAPEX_request_approved_n_a__c}"/></td>
    <td class="tg-0e45">CAPEX request approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.CAPEX_request_approved__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-q19q">CAPEX nr.</td>
    <td class="tg-baqh"><apex:inputField value="{!Project__c.CAPEX_nr__c}" style="min-width:100px;max-width:100px;height:17px;text-align:left"/></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Change_request_approved_n_a__c}"/></td>
    <td class="tg-0e45">Change request approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Change_request_approved__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-q19q">CR nr.</td>
    <td class="tg-baqh"><apex:inputField value="{!Project__c.CR_nr__c}" style="min-width:100px;max-width:100px;height:17px;text-align:left"/></td>
  </tr>

  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Validation_plan_approved_n_a__c}"/></td>
    <td class="tg-0e45">Validation plan approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Validation_report_approved__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.All_major_equipment_ordered_n_a__c}"/></td>
    <td class="tg-0e45">All major equipment ordered</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.All_major_equipment_ordered__c}"/></td>
    <td class="tg-031e"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-41g0"></td>
    <td class="tg-fwlz" colspan="2">Build</td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.CVP_approved_n_a__c}"/></td>
    <td class="tg-q19q">CVP approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.CVP_approved__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Production_line_installed_n_a__c}"/></td>
    <td class="tg-q19q">Production line installed</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Production_line_installed__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.I_OQ_protocols_prepared_n_a__c}"/></td>
    <td class="tg-q19q">I/OQ protocols prepared</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.I_OQ_protocols_approved__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Commercial_PQ_packaging_materials_n_a__c}"/></td>
    <td class="tg-q19q">Commercial/PQ packaging materials</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Commercial_PQ_pack_materials_ordered__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Production_capacity_planned_I_OQ_PQ_n_a__c}"/></td>
    <td class="tg-q19q">Production capacity planned (I/OQ &amp; PQ)</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Production_capacity_planned_I_OQ_PQ__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-41g0"></td>
    <td class="tg-fwlz" colspan="2">Prep-To-Start</td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Training_executed_n_a__c}"/></td>
    <td class="tg-q19q">Training executed</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Training_executed__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.IOQ_report_n_a__c}"/></td>
    <td class="tg-q19q">IOQ report signed</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.IOQ_report_signed__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.SOP_WRKI_certified_n_a__c}"/></td>
    <td class="tg-q19q">SOP/WRKI certified</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.SOP_WRKI_certified__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-41g0"></td>
    <td class="tg-fwlz" colspan="2">Start-up</td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
    <td class="tg-mtwr"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Validation_report_signed_n_a__c}"/></td>
    <td class="tg-q19q">Validation report signed</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Validation_report_signed__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
  <tr>
    <td class="tg-0e49"><apex:inputCheckbox value="{!Project__c.Production_hand_over_approved_n_a__c}"/></td>
    <td class="tg-q19q">Production hand-over approved</td>
    <td class="tg-baqh"><apex:inputCheckbox value="{!Project__c.Production_hand_over_approved__c}"/></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
    <td class="tg-yw4l"></td>
  </tr>
</table></center>
    </apex:pageBlock>
    </apex:form>
</apex:page>

 RPIRequestExtension which performs the saves and reloads the pages.
public class RPIRequestExtension {
    ApexPages.StandardController stdCtrl;
    public RPIRequestExtension(ApexPages.StandardController std)
    {
       stdCtrl=std;
    }

    public PageReference save()
    {
        stdCtrl.save();
        return null;
    }
}

Thanks for your feedback!