+ Start a Discussion
Denise CrosbyDenise Crosby 

trying to make my visualforce page more appealing in SF1 (using winter 18 and lightningstylesheets="true")

Hello developers,
I am fairly new to SF development. I have a custom VF page on a global quick action that creates an event. I want to make the vertical spacing on the page more appealing when viewed in SF1. I tried using the new lightningstylesheets="true" tag available in Winter 18, but it still doesn't look very good. I'd like to have more vertical spacing between my inputfields, for starters. Two other strange things I've noticed: searching on the account field cancels out of the screen on iPhone and after saving it navigates back to the home screen. I'd like it to navigate to the new event. Any help or advice is greatly appreciated.
 
<apex:page controller="NewMeeting" lightningStylesheets="true">
<apex:form >
  
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlockSection id="eventInformation" columns="1">

    <apex:inputfield label="{!accountLabel}" value="{!dummyContact.AccountId}" >
        <apex:actionSupport action="{!changeAccount}" event="onchange" rerender="eventInformation" />
    </apex:inputField>
    <apex:selectList label="{!contactLabel}" value="{!contactId}" size="1" rendered="{!showContactOptions}" id="contactselectlist">
        <apex:selectOptions value="{!contactOptions}" />
        <apex:actionSupport action="{!changeContact}" event="onchange" rerender="eventInformation" />
    </apex:selectList>
    <apex:pageBlockSectionItem rendered="{!!showContactOptions}"/>
    <apex:inputfield value="{!ev.subject}"/> 
    <apex:inputfield value="{!ev.description}"/>     
</apex:pageBlockSection>
        
<apex:pageBlockbuttons >
   <apex:commandbutton value="Save" action="{!save}" /> 
   <apex:commandbutton value="Cancel" action="{!cancel}" /> 
</apex:pageBlockbuttons>    
    
</apex:pageBlock>
      
</apex:form>
</apex:page>
Best Answer chosen by Denise Crosby
Nithesh NNithesh N
Try This...
 
<apex:page controller="NewMeeting" lightningStylesheets="true">
<apex:slds />
<apex:form >
  
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlockSection id="eventInformation" columns="1">

<div class="slds-m-vertical--medium">

    <apex:inputfield label="{!accountLabel}" value="{!dummyContact.AccountId}" >
        <apex:actionSupport action="{!changeAccount}" event="onchange" rerender="eventInformation" />
    </apex:inputField>
</div>

<div class="slds-m-vertical--medium">
    <apex:selectList label="{!contactLabel}" value="{!contactId}" size="1" rendered="{!showContactOptions}" id="contactselectlist">
        <apex:selectOptions value="{!contactOptions}" />
        <apex:actionSupport action="{!changeContact}" event="onchange" rerender="eventInformation" />
    </apex:selectList>
</div>
    <apex:pageBlockSectionItem rendered="{!!showContactOptions}"/>
<div class="slds-m-vertical--medium">
    <apex:inputfield value="{!ev.subject}"  /> 
</div>
<div class="slds-m-vertical--medium">
    <apex:inputfield value="{!ev.description}"/>    
</div>
    
</apex:pageBlockSection>
        
<apex:pageBlockbuttons >
   <apex:commandbutton value="Save" action="{!save}" /> 
   <apex:commandbutton value="Cancel" action="{!cancel}" /> 
</apex:pageBlockbuttons>    
    
</apex:pageBlock>
      
</apex:form>
</apex:page>

you should wrap it around each input field saperately. 


Best,
Nithesh

All Answers

Nithesh NNithesh N
Try this for the Spacing....

Wrap the Input fields with 
<div class="slds-m-vertical_x-small">


</div>

and add
 
<apex:slds />

under Line 1 (under apex:page).

Regarding the Navigate to New Event. Please see how the Save button acion is configured in the Controller. 

One Major thing to note here, is  lightningstylesheets="true"  is still in beta. So, Dont keep much hopes on it yet. 

Best,
Nithesh
Denise CrosbyDenise Crosby
Hi,
I tried wraping the input fields with <div class="slds-m-vertical_x-small"> or even <p class="slds-m-vertical--large"> but it doesn't seem to be making an difference visually. Can you see anything else I may be doing wrong? Thanks
 
Nithesh NNithesh N
Can you show me your code ??
Denise CrosbyDenise Crosby
Here it is. Thank you so much for your valuable time. I researched the slds-m-vertical class and it looks like it should be in the format slds-m-vertical--medium. I tried it your way also. I also tried removing the lightningStylesheets="true" but I still get no vertical spacing between my inputfields.
 
<apex:page controller="NewMeeting" lightningStylesheets="true">
<apex:slds />
<apex:form >
  
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlockSection id="eventInformation" columns="1">

<div class="slds-m-vertical--medium">

    <apex:inputfield label="{!accountLabel}" value="{!dummyContact.AccountId}" >
        <apex:actionSupport action="{!changeAccount}" event="onchange" rerender="eventInformation" />
    </apex:inputField>
    <apex:selectList label="{!contactLabel}" value="{!contactId}" size="1" rendered="{!showContactOptions}" id="contactselectlist">
        <apex:selectOptions value="{!contactOptions}" />
        <apex:actionSupport action="{!changeContact}" event="onchange" rerender="eventInformation" />
    </apex:selectList>
    <apex:pageBlockSectionItem rendered="{!!showContactOptions}"/>
    <apex:inputfield value="{!ev.subject}"  /> 
    <apex:inputfield value="{!ev.description}"/>    
</div>
    
</apex:pageBlockSection>
        
<apex:pageBlockbuttons >
   <apex:commandbutton value="Save" action="{!save}" /> 
   <apex:commandbutton value="Cancel" action="{!cancel}" /> 
</apex:pageBlockbuttons>    
    
</apex:pageBlock>
      
</apex:form>
</apex:page>

 
Denise CrosbyDenise Crosby
Here is the Apex controller code, if it helps:
 
public class NewMeeting {
    
public event ev { get; set; }
   
public NewMeeting (){
    ev = new event();
    ev.CurrencyIsoCode = UserInfo.getDefaultCurrency();
    ev.OwnerId = UserInfo.getUserId();
    ev.StartDateTime = Datetime.now().addMinutes(-Datetime.now().minute());
    ev.EndDateTime = Datetime.now().addMinutes(60-Datetime.now().minute());  
    ev.Subject = 'New Meeting';
    if ( ev.WhatId != null && ev.WhatId.getSObjectType() == Account.sObjectType )
        {
            dummyContact.AccountId = ev.WhatId;
        }
}
    
public Contact dummyContact
    {
        get
        {
            if ( dummyContact == null ) dummyContact = new Contact();
            return dummyContact;
        }
        private set;
    }
    
public List<SelectOption> contactOptions
    {
        get
        {
            if ( contactOptions == null && dummyContact.AccountId != null )
            {
                contactOptions = new List<SelectOption>();
                contactOptions.add( new SelectOption( 'null', '--None--' ) );
                for ( Contact contact :
                    [   SELECT  Id, Name
                        FROM    Contact
                        WHERE   AccountId = :dummyContact.AccountId
                    ]
                    )
                {
                    contactOptions.add( new SelectOption( contact.Id, contact.Name ) );
                }
            }
            return contactOptions;
        }
        private set;
    }

public Boolean showContactOptions
    {
        get { return contactOptions != null && contactOptions.size() > 1; }
    }
    
public String contactId { get; set; }
   
public String accountLabel
    {
        get { return Account.sObjectType.getDescribe().getLabel(); }
    }

public String contactLabel
    {
        get { return Contact.sObjectType.getDescribe().getLabel(); }
    }   
    
public void changeAccount()
    {
        ev.WhatId = dummyContact.AccountId;
        ev.WhoId = null;
        contactOptions = null;
    }

public void changeContact()
    {
        ev.WhoId =
        (   ( contactId != null && contactId != 'null' )
        ?   Id.valueOf( contactId )
       :   null
        ); 
    }        
    
public PageReference save() {
    return new ApexPages.StandardController(ev).save();
  }  

public PageReference cancel() {
    return new ApexPages.StandardController(ev).cancel();
  }     
      
}

 
Nithesh NNithesh N
Try This...
 
<apex:page controller="NewMeeting" lightningStylesheets="true">
<apex:slds />
<apex:form >
  
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlockSection id="eventInformation" columns="1">

<div class="slds-m-vertical--medium">

    <apex:inputfield label="{!accountLabel}" value="{!dummyContact.AccountId}" >
        <apex:actionSupport action="{!changeAccount}" event="onchange" rerender="eventInformation" />
    </apex:inputField>
</div>

<div class="slds-m-vertical--medium">
    <apex:selectList label="{!contactLabel}" value="{!contactId}" size="1" rendered="{!showContactOptions}" id="contactselectlist">
        <apex:selectOptions value="{!contactOptions}" />
        <apex:actionSupport action="{!changeContact}" event="onchange" rerender="eventInformation" />
    </apex:selectList>
</div>
    <apex:pageBlockSectionItem rendered="{!!showContactOptions}"/>
<div class="slds-m-vertical--medium">
    <apex:inputfield value="{!ev.subject}"  /> 
</div>
<div class="slds-m-vertical--medium">
    <apex:inputfield value="{!ev.description}"/>    
</div>
    
</apex:pageBlockSection>
        
<apex:pageBlockbuttons >
   <apex:commandbutton value="Save" action="{!save}" /> 
   <apex:commandbutton value="Cancel" action="{!cancel}" /> 
</apex:pageBlockbuttons>    
    
</apex:pageBlock>
      
</apex:form>
</apex:page>

you should wrap it around each input field saperately. 


Best,
Nithesh
This was selected as the best answer
Denise CrosbyDenise Crosby
Thanks so much for your wonderful help, Nithesh!