Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Daniel BleasdaleDaniel Bleasdale 

How to use SLDS, How to utilise VisualForce Components, Implement Save and Cancel

How do I use VisualForce Component, Im struggling to wrap my head arond them. How are they called and refrenced and what Must I do to impliment a Save and Cancel function to my page? 
<div class="slds-col slds-no-flex slds-grid slds-align-top">
                    <div class="slds-button-group" role="SPC">
                        <button class="slds-button slds-button_neutral">
                        	Save
                        </button>
                        <button class="slds-button slds-button_neutral" onclick="window.print();" >
                            Print
                         </button>
                        <button class="slds-button slds-button_neutral" >
                        	Cancel
                        </button>
                    </div>
                </div>
I expected It to be somthing like this - 
<div class="slds-col slds-no-flex slds-grid slds-align-top">
                    <div class="slds-button-group" role="SPC">
                        <button class="slds-button slds-button_neutral" action="{!save}" >
                        	Save
                        </button>
                        <button class="slds-button slds-button_neutral" onclick="window.print();" >
                            Print
                         </button>
                        <button class="slds-button slds-button_neutral" >
                        	Cancel
                        </button>
                    </div>
                </div>

But I get this Error
Unknown property 'Apprentice__cStandardController.save'
Im using a Standard Controller so I have no clue why this error is appearing.
  
<apex:page standardController="Apprentice__c" title="Learning Agreement" showHeader="false" standardStylesheets="false" sidebar="false">
<head>
    <title>Apprentice Learning Agreement Form</title>
    <apex:slds />
</head>
<body>
    <div class="slds-scope">
        <div class="slds-page-header">
            <div class="slds-grid">   
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media slds-no-space slds-grow">
                        <div class="slds-media__body">
                            <h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="Apprentice Learning Agreement">Apprentice Learning Agreement</h1>
                        </div>
                    </div>
                </div>     
<!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
                <div class="slds-col slds-no-flex slds-grid slds-align-top">
                    <div class="slds-button-group" role="SPC">
                        <button class="slds-button slds-button_neutral" action="{!save}" >
                        	Save
                        </button>
                        <button class="slds-button slds-button_neutral" onclick="window.print();" >
                            Print
                         </button>
                        <button class="slds-button slds-button_neutral" >
                        	Cancel
                        </button>
                    </div>
                </div>


 
Best Answer chosen by Daniel Bleasdale
Raj VakatiRaj Vakati
try this code
  
<apex:page standardController="Apprentice__c" title="Learning Agreement" showHeader="false" standardStylesheets="false" sidebar="false">
<head>
<title>Apprentice Learning Agreement Form</title>
<apex:slds />
</head>
<body>
<div class="slds-scope">
	<div class="slds-page-header">
		<div class="slds-grid">   
			<div class="slds-col slds-has-flexi-truncate">
				<div class="slds-media slds-no-space slds-grow">
					<div class="slds-media__body">
						<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="Apprentice Learning Agreement">Apprentice Learning Agreement</h1>
					</div>
				</div>
			</div>     
<!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
			<div class="slds-col slds-no-flex slds-grid slds-align-top">
				<div class="slds-button-group" role="SPC">
				<apex:commandButton action="{!save}" value="Save" id="theButton" styleClass="slds-button slds-button_neutral" />
				<apex:commandButton action="{!cancel}" value="Cancel" id="theButton" styleClass="slds-button slds-button_neutral" />

									<apex:commandButton action="{!print}" value="Print" id="theButton" styleClass="slds-button slds-button_neutral" />

				</div>
			</div>

 

All Answers

Raj VakatiRaj Vakati
try this code
  
<apex:page standardController="Apprentice__c" title="Learning Agreement" showHeader="false" standardStylesheets="false" sidebar="false">
<head>
<title>Apprentice Learning Agreement Form</title>
<apex:slds />
</head>
<body>
<div class="slds-scope">
	<div class="slds-page-header">
		<div class="slds-grid">   
			<div class="slds-col slds-has-flexi-truncate">
				<div class="slds-media slds-no-space slds-grow">
					<div class="slds-media__body">
						<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="Apprentice Learning Agreement">Apprentice Learning Agreement</h1>
					</div>
				</div>
			</div>     
<!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
			<div class="slds-col slds-no-flex slds-grid slds-align-top">
				<div class="slds-button-group" role="SPC">
				<apex:commandButton action="{!save}" value="Save" id="theButton" styleClass="slds-button slds-button_neutral" />
				<apex:commandButton action="{!cancel}" value="Cancel" id="theButton" styleClass="slds-button slds-button_neutral" />

									<apex:commandButton action="{!print}" value="Print" id="theButton" styleClass="slds-button slds-button_neutral" />

				</div>
			</div>

 
This was selected as the best answer
Daniel BleasdaleDaniel Bleasdale
That works thanks, as long as its embedded within an Apex:form:- 
<div class="slds-col slds-no-flex slds-grid slds-align-top">
                        <div class="slds-button-group" role="SPC">
                            <apex:form>
                                <apex:commandButton action="{!save}" value="Save" id="theButton" styleClass="slds-button slds-button_neutral" />
                            </apex:form>
                            <button class="slds-button slds-button_neutral" onclick="window.print();" >
                                Print
                            </button>
                            <apex:form>
                            <apex:commandButton action="{!cancel}" value="Cancel" id="theButton" styleClass="slds-button slds-button_neutral" />
                            </apex:form>
                        </div>
                    </div>