This is a simple fluid page with both a static image and a grid containing user uploaded images App Designer Fluid Page GroupBoxes Place the image control on the page and then use the Fluid Properties tab to define the height and width parameters of the image. I have pulled out several image styles from the May 2015 CSS Guide and placed them in Appendix A below along with a usage example where available.įluid Image styles are much like using static images in HTML page controls.
Most of the delivered image styles in the Fluid UI are in the PSSTYLEDEF_FMODE stylesheet. If font sizes change throughout the page, the em size also changes altering the size of your images. The user’s browser calculates the pixel each em value of when the page renders.Īn important point about the em measurement is that it could change multiple times within a page. If the font size of the current element is 10 pixels: The em size is relative to the font size of the element being styled.
The element or “em” tag is a relative size that is adjustable to the UI. The value is fixed regardless of the user’s browser settings or device. Pixel is an absolute unit of measurement that does not scale. The above CSS tag sets the image height at 3 EM, not pixels. PeopleTools uses EM measurements rather than pixels for size refences in the CSS. SELECT E.PNLNAME, D.DESCR, F.RECNAME, F.FIELDNAME, E.PNLFLDID, E.FFSTYLELONGįROM PSPNLFIELDEXT E, PSPNLFIELD F, PSPNLDEFN DĪND E.FFSTYLELONG LIKE '%psc_invisible%' Search this table using SQL to find existing CSS Style Usage in delivered PeopleSoft pages. Page field fluid styles are stored on the PSPNLFIELDEXT table in the FFSTYLELONG field.
CSS FLUID IMAGE PDF
Cutting and pasting from the PDF document is also discouraged due to characters such as the dash (“-“) mis-translates in the App Designer. Some of the references are obscure and contain incorrect tag syntax.
CSS FLUID IMAGE CODE
Use this document and a guide, not a literal code bible. This guide has never been updated with the subsequent PeopleTools releases, but it does provide good insight into the delivered styles available for your pages. PeopleSoft published the “CSS Guide for PeopleSoft Fluid User Interface” in 2015 with PeopleTools 8.54. PeopleSoft Fluid User Interface Supplemental Documentation (Doc ID 1909955.1) It will provide the basics to get you started. This paper is not a definitive guide for all fluid image techniques. We assume the reader understands the basic concepts of developing a Fluid application and using images on classic pages. This paper is an introduction to applying delivered PeopleSoft styles to images on a Fluid UI Page. The delivered PeopleSoft CSS Styles can be used for both. The good news is that Fluid treats all images the same, whether they are Design Time Images or User Uploaded Images. The only real difference is that we now use the “Fluid” tab on the Page Field Properties to control how that image displays. The tools for placing images on a page are those same tools we use on classic pages. Images are an important part of the modern User Experience (UI). Properly constructed, one page will meaningfully adjust to multiple different displays from a desktop to a mobile phone at runtime. PeopleSoft Fluid UI allows developers to create pages that adapt to the user’s screen.
CSS FLUID IMAGE DOWNLOAD
PeopleTools Project with all Demo Objects (zip) Download Introduction
0 kommentar(er)
