Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Friday, February 16, 2018

Visualforce renderAs pdf in different page format


Over the years, I found that there are so many people struggling with rendering pdf using visualforce, specially when they are required to set a custom page size, page break, margin, adding custom styling.

Today I shall give an example on how to print a contact address on an envelope using a pdf generated from a pdf upon the click of a button from the page layout.

First of all, to be able to generate a pdf from a Visualforce page, you need to use the renderAs attribute on the apex:page tag. See code below:



The above code will generate a pdf but you will notice that the page size will be in an A4 or letter document format. We want to achieve an envelope page size as mentioned early. This can be easily be achieved using some css in the code.

The following attribute are required on the apex:page tag: applyHtmlTag="false" and showHeader="false". To specify a size for the rendered pdf, the following style need to be added to the page:

<style>
@page {
    size: 6.4in 4.5in;
}
</style>

The size is customizable depending on the desired print layout:
  • size: A4;
  • size: A5 landscape;
  • size: 9in 5in;
When the @page is not specified, a full document format pdf is created. 
When no size specified (default to A4)

Now with a size specified.
Envelope size (6.4in x 4.5in)
Here is the full code for the above output.


Additional and helpful resources:

Enjoy ;)

Saturday, February 11, 2017

Nice css spinner for Visualforce pages

Did it ever happen that you have design a nice looking Visualforce page and had to insert a loading icon but didn't want to use the one provided by Salesforce (see image below)?

Well it happened to me a lot of time that I needed to find a reusable piece of code for a loading/spinner icon. Doing some research I found a that this guy, Tobias Ahlin, has come up with a SpinKit (https://github.com/tobiasahlin/SpinKit). So I decided to make a reusable component for having different kind of spinner with customize colors.

It is pretty easy to use, just need to copy the component on your Salesforce environment and execute some JavaScript whenever you want to toggle on and off the spinner/loading.

Source code can be found here: https://github.com/kevanmoothien/sfdc-spinner



The result should look something like that:

A live demo of all the spinners is available at: http://tobiasahlin.com/spinkit/

Hope you like this tutorial.

If you have any suggestions on how to improve this component, I will be glad to hear them.

Cheers!!

Installation

Click on the link below and add the codes in a visualforce component name "spinner" or any other name that sound best for you

Basic usage

Include the Visualforce component on the Visualforce page you want to use the spinner/loading like in the code below.
<apex:page>
  <c:spinner />
</apex:page>
Displaying the spinner
To display the spinner, a JavaScript code must be executed. Here are the code
km_spin(true); // to show the spinner
km_spin(false); // to hide the spinner

Advanced usage

Customizing the spinner
You can further customize the Spinner by adding some attributes such as in the code below:
<apex:page>
    <c:spinner spinner_name="wave"  spinner_color="red" />
</apex:page>
Possible value for "spinner_name" are:
  • rotating-plane
  • wave
  • wandering-cubes
  • spinner-pulse
  • double-bounce
  • chasing-dots
  • three-bounce
  • circle
  • cube-grid
  • fading-circle
  • folding-cube
Value for "spinner_color" is a hex or html color name