Create a simple Force.com site using VisualStrap

I just seeded a new version of VisualStrap with much more components and added a bit of optimisation to existing css. This blog is more about how you can create your Force.com site page very easily using VisualStrap.

Lets take an example of a site of a Product/Company and talks about its features/offering. The site will be a very simple one, one main block which has the company/product banner and some other small blocks that talks about the features.


The Design


The Design
To achieve the above design we will basically need the following stuff


  • navbar (header & footer)
  • well (for features and some minor items)
  • column (grid)
  • row (grid)
  • jumbotron (Highlighted main panel)


Desktop View

Mobile View (the column type/class "col-md-4" makes the blocks stack on devices with lower screen resolution)

So finally the actual page uses


  • navbar
  • well
  • column (grid)
  • row (grid)
  • button
  • modal
  • glyph
  • jumbotron


The Code


<apex:page showHeader="false" docType="html-5.0" >  
   <vs:importvisualstrap />  
   <style>  
     body{  
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
       }  
     .intro{  
       margin-top:20px;  
       font-size:140%;  
       font-weight: 200;  
     }  
   </style>  
   <vs:visualstrapblock >  
     <apex:form >  
       <!--header -->  
       <vs:navbar brand="Blogforce9" inverse="true" type="fixed-top">  
         A site about VisualStrap  
       </vs:navbar>  
       <!-- highlighted content -->  
       <apex:outputPanel layout="block" styleClass="container" >  
         <apex:outputPanel layout="block" styleClass="jumbotron" style="text-align:center">  
           <h1><vs:glyph icon="bookmark" style="font-size:75%"/> VisualStrap Demo Site</h1>  
           <p>This is a example how VisualStrap can be used to create a site page. All the standard components can be used inside this page without any problem </p>  
           <apex:commandButton styleClass="btn-lg btn-success" value="Submit Request" html-data-toggle="modal" html-data-target="#newRequest"/>  
         </apex:outputPanel>  
       </apex:outputPanel>  
       <!-- the feature section -->  
       <apex:outputPanel layout="block" styleClass="container" >  
         <apex:outputPanel layout="block" styleClass="row">  
           <apex:outputPanel layout="block" styleClass="col-md-4">  
             <apex:outputPanel layout="block" styleClass="well">  
               <h3>   
                 <vs:glyph icon="cog"/> Optimized  
               </h3>  
               <div class="intro" >VisualStrap is based on Bootstrap 3. It uses a wrapper style class to designate the areas where actual theming using bootstrap is required. VisualStrap CSS is optimized to work with Visualforce pages even with standard stylesheet and header on.</div>  
             </apex:outputPanel>  
           </apex:outputPanel>  
           <apex:outputPanel layout="block" styleClass="col-md-4">  
             <apex:outputPanel layout="block" styleClass="well">  
               <h3>   
                 <vs:glyph icon="retweet"/> Flexible  
               </h3>  
               <div class="intro" >VisualStrap is based on bootstrap there are many components available in the package that can be used to create pages. If are aware about bootstrap components you can directly implement them in page without using components </div>  
             </apex:outputPanel>  
           </apex:outputPanel>  
           <apex:outputPanel layout="block" styleClass="col-md-4">  
             <apex:outputPanel layout="block" styleClass="well">  
               <h3>   
                 <vs:glyph icon="tasks"/> Components  
               </h3>  
               <div class="intro" >There are many components available in the package that makes Bootstrap/VisualStrap implementation inside a page very easy. These components handles most of the styling based on a very familiar syntax</div>  
             </apex:outputPanel>  
           </apex:outputPanel>  
         </apex:outputPanel>  
       </apex:outputPanel>  
       <!-- footer -->  
       <vs:navbar brand="Blogforce9" inverse="true" type="fixed-bottom" layout="none">  
         <center>  
           <apex:outputPanel styleClass="text-muted" style="margin:20px;font-size:130%" layout="block">  
             <vs:glyph icon="bullhorn"/> Site powered by Force.com  
           </apex:outputPanel>  
         </center>  
       </vs:navbar>  
       <!-- the modal form-->  
       <vs:modal title="New Request" id="newRequest">  
         <apex:pageBlock mode="maindetail">  
           <apex:pageBlockSection >  
             <apex:pageBlockSectionItem >  
               <apex:outputLabel >First Name</apex:outputLabel>  
               <apex:input type="text"/>  
             </apex:pageBlockSectionItem>  
             <apex:pageBlockSectionItem >  
               <apex:outputLabel >Last Name</apex:outputLabel>  
               <apex:input type="text"/>  
             </apex:pageBlockSectionItem>  
             <apex:pageBlockSectionItem >  
               <apex:outputLabel >Email</apex:outputLabel>  
               <apex:input type="text"/>  
             </apex:pageBlockSectionItem>  
           </apex:pageBlockSection>  
         </apex:pageBlock>  
         <apex:outputPanel styleClass="modal-footer" layout="block">  
           <apex:commandButton value="Close" styleClass="btn-warning" html-data-dismiss="modal"/>  
           <apex:commandButton value="Save Request" styleClass="btn-success" html-data-dismiss="modal"/>  
         </apex:outputPanel>  
       </vs:modal>  
     </apex:form>  
   </vs:visualstrapblock>  
 </apex:page>


To use the above code you need to install the latest version of VisualStrap from the below link. If you are using the source files from Github to install the components replace the "vs:" in the above code with "c:".

Important Notice : There is a bug in platform related to Managed Package only due to which salesforce is not able to resolve the namespace name properly. I have a ticket raised with salesforce but its still open. Meanwhile if you face issues with it you can use the source from the Github or use the Unmanaged Package


9 comments:

  1. So to confirm, does this work with a managed package? I'm building a managed package and wanted to use visualstrap possibly?

    ReplyDelete
    Replies
    1. Yeah you can always use the unmanaged version of the Visualstrap inside your managed package. It will work!

      Delete
  2. I Copied the same code. everything is perfect. but when i click on Submit Request, i am getting a POPUP with 3 fields . but it is disappearing immediately :(

    ReplyDelete
    Replies
    1. Hi Ravi you add a onclick handler for the commandbutton that you are using to open the popup ? something like onclick="return false;"

      Delete
    2. Thank u bro... Worked .. Awesome :)

      Delete
    3. Is there any specific documentation which explains about all the CSS Style Classs of this VisualStrap?

      Delete
  3. Got this "http://visualstrap-developer-edition.ap1.force.com/apex/VisualStrapComponents" from your twitter page.. awesome bro :)

    ReplyDelete
  4. Hi!!! I am able to install manage package in sandbox ,but I am not able to install unmanaged package in sandbox?is there any way to install it in sandbox?

    ReplyDelete
  5. Hi Avinava - Do you have some thoughts on how to render modals dynamically? I would like to use some modals as warning or information messages based on user input. Any advice you could provide would be greatly appreciated!! I very much like Visualstrap!

    ReplyDelete