Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas
Mostrando entradas con la etiqueta JavaScript. Mostrar todas las entradas

sábado, 17 de enero de 2015

Using JavaScript to print a PeopleSoft Page

When working with Peoplesoft more than once we need/want to print the page we are working with.

Unfortunately, until a few time ago, I only knew one way to do that: printing the page throug the web Browser option.
But this method adds the navigation bar and menu to the printing page. I think these things are, at least, unnecesary.

With some simple steps we will see a new way of printing the page content, and avoid showing those unwanted sectors.

Let's have a practical example:

1) We have the Purchase Order page we have seen in the previous blog.



2) We will add an HTML area, based on a LONG type field.



3) We also add a push button to print the page. In this case, we will change some usual options.



This field must have a minimum of 25 characters, since we need to populate it with a string. I have chosen the DESCR field, in stead of a PRINT button field.

The target must be an External Link since we won't execute a FieldChange event. We are going to run a script in an external page.

The external link must be set as Dynamic, since we are generating it through PeopleCode.

We also set a Page Field Name property, in case we want to manipulat it through the HTML code.



Just to let the page having sense, we change the field label.



4) Here we have the final page in the Designer.



5) Set up the fields by PeopleCode.



In the RowInit Event we set the HTMLAREA field as well as the DESCR field.

The script we must set in the button to be run is  "javascript:window.print();"

On the other side, I will explain HTLMAREA value step by step.

a) <style type=""text/css"">
b)    @media print {
c)            #PAGEBAR, .PSHEADERTOOLBARFRAME {
d)                    display: none }
e)      }
f) </style>

a) Open a style tag, specifying CSS language will be used.
b) Specify this style will only be used when Printing the document.
c) Choose those HTML elements in the document that will be set up with the properties. In this case #PAGEBAR and .PSHEADERTOOLBARFRAME are the navigation bar and page header used by PeopleSoft pages.
d) Set display property to none, meanning these properties won't be shown in the printing document.
e) Close the "@media" key.
f) Close the "style" tag.

6) We navigate to the page in PeopleSoft.



7) When clicking the print button, the event is executed



8) The printed page will be shown as follows:



9) In addition to this step by step, we could also hide the "Print" button when printing the page, adding the #PRINT ID to the CSS script, in the RowInit event.



If we print it once again, the Print button is not shown anymore.



I hope this blog could be so useful to you as it is to  me.
Regards.
Facundo Salerno.

Usar JavaScript para imprimir una página


A la hora de usar PeopleSoft mas de una vez necesitamos/queremos imprimir la página en la que estamos trabajando.

Lamentablemente, a la hora de hacerlo, la única forma conocida por mi (hasta hace poco tiempo) es imprimir la página desde el navegador.
Pero a la hora de hacerlo nos incluye en la impresión el menú lateral y/o superior.
Esto puede ser molesto, o al menos innecesario.

Con unos simples pasos, veremos la forma de imprimir el contenido de una página, sin mostrar esos sectores indeseados.

Veamos un ejemplo práctico:

1) Tenemos la página de pedidos que hemos usado en el ejemplo anterior:



2) Vamos a agregar un área HTML, asignándole un campo LONG


3) Agregamos un botón para imprimir la página con ciertas especificaciones distintas a las usuales:


El campo tiene que tener un mínimo de 25 caracteres de largo, por lo cual uso el campo DESCR, en lugar de un campo de botón común.
El destino va a ser un link Externo, porque no se trata de un evento FieldChange, sino que queremos ejecutar un script en una página ventana a la nuestra.
El link va a ser dinámico, ya que lo generaremos por PCode.

Además, le damosun nombre a nivel de página al campo, por si queremos encontrarlo" y utilizarlo desde el HTML.


Para darle sentido a la página le cambiamos la etiqueta al campo.


4) La página nos quedaría de la siguiente forma:


5) Cargamos el script en el campo HTMLAREA:


En este evento cargamos tanto el valor del HTMLAREA, como el valor del botón.

El botón lleva el script a ejecutar: javascript:window.print();


En cambio, el contenido del HTML será entonces línea por línea: 
a) <style type=""text/css""> 
b)    @media print { 
c)            #PAGEBAR, .PSHEADERTOOLBARFRAME { 
d)                    display: none }
e)      }
f) </style>

a) Abro el tag de estilos, indicando que usaré CSS
b) Especifico para que tipo de salida es el estilo, aclarando que es solo a la hora de imprimir.
c) Elijo que elementos del HTML usarán la propiedad siguiente, en este caso #PAGEBAR y .PSHEADERTOOLBARFRAME son la barra de navegación y el encabezado propio de las páginas de PeopleSoft.
d) le pido que la propiedad display tenga un estado "none", es decir, no se mostrarán y cierro la llave de la propiedad
e) cierro la llave del tipo de salida.
f) cierro el tag de estilo.


6) Entramos a la página desde el sistema:


7) Al darle clic al botón, se ejecuta el evento ingresado:


8) Y la impresión resultante, queda de la siguiente manera:


9) Por último, podríamos también ocultar el botón "Imprimir" agregándolo a las propiedades del CSS.
Para hacerlo entonces, basta agregar la propiedad en el RowInit:


Le anteponemos el # porque así es como se indica el ID del Campo en el CSS.

Si ahora volvemos a imprimir, el campo ya no aparece en la impresión.



Espero que este simple Paso a Paso les resulte tan útil como a mí.

Saludos.
Facundo Salerno.