In Target page information we need to provide owner ID,Parent folder, sequence Number and target page security. In this example i have given public Security as shown below. We already know the development of Pivot Grids, once again will see the development of pivot grids with data source as PS Query for reference.
Now,Page is redirected to Tile List page. From PeopleSoft 9. Now in this scenario, will see the development of Fluid tiles and use that tiles in Fluid landing Homepages. Here, in Fluid Attributes page we have to provide Image Name to display on tile and parameters like Display in,Height and Width of the tile.
Skip to content January 4, January 31, Venkatesh Ravilla. Step 1: Create PeopleSoft Pagelets. Step 2: Create Content reference with fluid parameters. Step 3: Publish the content reference as Fluid tile. Now, PeopleSoft Pagelet development has been completed. Step 2: Create Content reference with fluid parameters: Now, create the content reference in specific folder with parameters as shown below.
Fluid Header and Navigation is the New Standard
Step 3: Publish the content reference as Fluid tile: Next, Publish the Pagelet embedded Content reference in fluid landing page. Traverse into your created content reference location. Added fluid tile in landing page as shown below. February 3, January 29, Venkatesh Ravilla. Now, will see the development of fluid tile with data type as Navigation Collections.PeopleSoft Spotlight Series: Developing Fluid Applications
Now, this tile is published as shown below. Now Fluid tile has been added to landing page as shown below. Now, Pivot Grid is Created successfully.!! Here, In below page we have to provide our target page information then click on Next Button. In Below page, we need to provide tile layout properties and tile Repository details.
Now Save the component and go to your Home page Home button on Header banner. Next, Personalize your home page in Actions list as shown below. Next,Save the Home Page. February 3, March 7, Venkatesh Ravilla. Post to Cancel. By continuing to use this website, you agree to their use.
The bread crumbs and cascading menus were cumbersome, and although they could be used effectively, there are better ways of navigating now, but it takes thinking differently.
For example, apps are building more role-based home pages so that the components one needs are at one's finger tips. Fluid nav collections, search, and other mechanisms make navigation easier, but it requires a different mind set. Is there a way in 8. Wasn't that the original intent of allowing two different start pages 'page' and 'fluid home page' start pages in the web profile configuration? I believe that is how it worked with 8.
We are rolling out the fluid interface to a pilot group before the rest of our company. We need to be able to direct some users directly to fluid, and others to classic. I wonder if anyone has done any usability studies using the Fluid navigation with the New Window option. The Fluid navigation pretty much breaks the New Window feature, which is a real killer to power users that are moving around with multiple windows open.
This is really easy to demonstrate. I'll provide a procurement example, but this works for any New Window link. You pretty much have to go back to the home page since you don't have breadcrumbs. You'll get an error.
The reason for this is that there has been an issue with the New Window link ever since 8. When you pop a new window, the URL gets a suffix added into it. This is how your browser keeps the two windows separated while sharing the cookie.
But, if you hit the Home icon in the new window, the suffix is lost. So, when you start jumping back and forth between windows, your browser cannot keep it straight as the cookie is being shared and you end up with getting "page no longer available" or being kicked into a page that mirrors the one that was in your first window.
Steve: Thank you for your comment. Can you open a bug for this?
We don't have New Window in Fluid, but we will work on a way to rectify this issue. You make a good point. It appears the PeopleSoft development is following the way of Fusion development, where they enforce what customers can see, and not driven by customer's needs. Similarly, as it is called out by Steve above, the New Window feature is a must.
Change is always good, but that change needs to be good enough to justify the learning and the need for adopting that change. Keep in mind that users can still access all the menus that they could previously by using the navigator in the nav bar.Thanks Sasank for a nice post on fluid grid.
Have you encountered a requirement to hide "Row selection indicator [single row radio button]" via peoplecode or via grid properties? It seems to work the same as in Classic. Thanks Sasank for the prompt response - I want to keep the 'Row Selection Indicator' on but want to disable for few rows - is it possible? I have not tried that. I doubt it is possible in classic or fluid using either peoplecode or grid properties.
Hi Sasank, Very elegant and creative solution to the problem! Just curious, instead of doing the page activate peoplecode.
Could we use the Formfactor override on the fluid tab? Which means that you add a specific class to all of them except the small form factor.
Thanks for sharing! Thanks Stefan for the brilliant idea. It was very simple to do that and avoid peoplecode! I updated the post the include this workaround as well.
Again, thank you for the great idea. Nice post. Makes me wish I was going to have an opportunity to work with fluid more than the one page I created as essentially an experiment. Since we are on earlier tools and app versions 8. Just out of curiosity I wonder if you have ever come across this.
I had to do this just the other day, real easy to accomplish. Click 'Upload Image Object' then upload your image. Double click on the square button right next to the Cancel button.
When the properties box opens click the label tab and under 'Label Image' upload your image. Click OK then save the page and your image should appear in the header. Here is some documentation I found that could help you out a lot. Follow along with this article, it is very good at describing the steps you need to take to change the page logo.
Learn more. Asked 4 years, 8 months ago. Active 4 years, 7 months ago. Viewed 3k times. Dillon Ma Dillon Ma 11 2 2 silver badges 7 7 bronze badges. Active Oldest Votes. Hi,Thank you for your anser. According to your method, I tried, but did not changed. DillonMa Apollogies to you, I gave you the steps to change the logo for fluid pages. I have updated my answer with an article that is very well written and should give you a lot of knowledge on branding your site.
Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password.
Post as a guest Name. Email Required, but never shown. The Overflow Blog. Featured on Meta. Community and Moderator guidelines for escalating issues via new response…. Feedback on Q2 Community Roadmap. Technical site integration observational experiment live on Stack Overflow.
Dark Mode Beta - help us root out low-contrast and un-converted bits. Related 2. Hot Network Questions. Question feed.Because fluid pages render differently according to the device form-factor on which they are displayed.
This fact, coupled with the integration of standard web-development technoligies like CSS and HTML, makes fluid a much more powerful technology than PeopleSoft classic.
Developing with Fluid UI – The Fluid Home Page
Figure 1. A sample fluid page in Application Designer. Figure 2. The same fluid page rendered in a browser. This is the default style. There are many ways of adjusting the page style, but I want to focus on free-form stylesheets and CSS. Figure 3. Figure 4. The fluid page rendered in a browser after adding delivered style classes.
Figure 6. The fluid page rendered in a browser after using the custom CSS class. NOTE: you can also use element ids in the free form stylesheet to call out specific elements.
Figure 7. Styling an element by id. By Psft Info. Psft Info. Follow Tech Sign In Page. Forgot Password? Don't have an account? Sign up. Monday December 03, Favorites Tech Sign In Page. Bookmark Tech Sign In Page. A sample fluid page in Application Designer Figure 2.
Figure 5. Some name. Tech Sign In Page. Some name 10k Followers. More by this Author.Many sites have more than this. Please create a custom menu:. This is a small but important point. Drag the preview screen width down using the top horizontal ruler. The image and main menu both get cropped. This is because the content inside the fluid wrapper is still rigid.
In this section I will show you how to make the various header components fluid. I will also flag the problems nested HTML elements create and demonstrate how to deal with them. At smaller screen sizes, the banner image gets cut off instead of scaling down.
Custom Fluid Homepage Background Image
You can fix this by creating a selector that targets the banner image and then apply new styles to it. Drag the preview screen width slider down and try not to be too disappointed. The image will still be stubbornly rigid. You have stumbled across the Nested elements pitfall. A common cause of CSS confusion. The first step to solving this problem is to identify which parent element has a fixed width value.
Drag the preview width slider down and rejoice. The image should scale down and finally the site is starting to look slightly responsive! You may notice that the main menu is still rigid. As before, the trick is to identify which elements have fixed width properties.
Menus always contain nested HTML elements. The site title and site description, which are normally on the same line as each other, split onto two separate lines on small screens. You can fix it by making the site title and description fluid too.
The site title and description will continue to stack side by side on smaller screens now. Some extra work will be needed for tidiness, but we can leave that for now. Microthemer auto-converts pixels to percentages when you enter an excel-style formula e.
Microthemer queries the width of the parent element to perform this calculation. If your selector targets more than one element, Microthemer uses the parent of the first element in the selection. You can override this by providing a number as a second parameter e.
You may prefer to set this auto-conversion behaviour by default. You can do this via the CSS Units tab in the preferences. Whenever you type a number Microthemer will convert it to an equivalent percentage or em. But please leave the default unit settings while you work through the rest of this tutorial.
It is not uncommon for web pages to nest considerably deeper than four levels. The branding element could have caused hours of frustration when trying to make the banner image fluid. This situation can happen frequently. They are not illuminated because they contain floating menu items. A parent element can also be hard to spot when there is no padding, border, or margin separating it from its child. Parent and child occupy exactly the same space on the page.
And so highlighting alone gives no clue about which element is being targeted. Microthemer Note: Auto-Conversions Microthemer auto-converts pixels to percentages when you enter an excel-style formula e.The Home Page is a component, the tiles or grouplets are group boxes, and the search and prompt pages are just pages.
That is the one flag that will tell PeopleSoft if the component is Fluid responsive, dynamic layout or classic pixel perfect.
A Fluid Header
There are some other interesting fields on this page. The Small Form Factor Optimized field tells us whether or not to display this on a small device think smarphone. Header Toolbar Actions offer standard options that are set at the component level so you have complete control of the components header bar.
Probably not a good idea to mess with that code! That is where Fluid UI is so different. With Fluid UI, everything is positioned relative to something else. They are UI objects that are used for dynamic positioning.
The Fluid Home Page has some special behavior and special settings. There are two checkboxes that control the behavior of Fluid UI. This is a web profile setting for users that want to run later versions of PeopleTools but only want to run Classic PeopleSoft pages.
In that section, each user has the choice to determine the home page for their desktop and for tablets. Now that you know the Fluid UI landing page is just a component, and the profile and personalization settings, you should be able to launch one. Latest versions of Chrome, Firefox and IE will do.
Check the certification page on MOS for all the details. Take a moment to navigate around and look at some of the header actions that were set up from the component properties. The home button takes you back to the classic system.
The NavBar icon on the top right has a lot of content, including a Navigator and Classic home. On premises installs of PeopleTools 8.
For those of you ready to download The ability to customize PeopleSoft applications has always been a strength of our products. That ability came with a cost, though