Objective
See the list of the types of components that can be added to pages created with Career Site Builder.
After adding a component to a page, you can select the component name and give it a new name, which is especially helpful when a page has multiple components of the same type.
The available components have one or more tabs to configure. Two of the tabs are presented for many of the components: the Details and Styles tabs.
The Details tab is where you can enter information such as Header Text, Body Text, and so on.
The Styles tab is where you configure colors and images, such as the color of the text and the background of the component.
For any component that has text as an option, you can add an embedded URL within the text by selecting the Open Link Editor button.
In the figure below, the link is associated with the word here.
From the Link Setup menu, select the type of link. You can link to an external site by choosing External type. In that case, be sure to specify to open the page in a new window.
To add a link for email, choose the External link type, and for the link use: mailto:emailaddress.
For some components you can add a button by enabling the Show Button control from the Details tab.
Click Edit Button to configure the button.
The Enable Spacing control allows you to customize the size for the component margins. For each component, you can choose Small, Medium or Large spacing, or you can customize spacing by entering the number of pixels desired between the components.
The page below was created with three components: Text, Search Bar and Google Job Map. When Enable Spacing is disabled, all components are touching. In this example, Enable Spacing is enabled for the Text and Map components from the Styles tab. It was set to Medium for the Top and Bottom margins, and Custom=0 for the Right and Left sides. Notice the spacing that was added between the components.
You can duplicate a component so that you don't have to configure all of the settings manually when you insert an additional component of the same type on the page. This is particularly helpful when you want to create a slightly different user experience between desktop, mobile, and tablet views of the same page.
Some components contain other tabs to be configured in addition to the Details and Styles tabs.
The use of the custom plugin component enables customers to differentiate the functionality and styling of your career site from other sites. The custom plugin allows a third-party developer to insert custom code for a new component on any Career Site Builder page. The goal is to extend functionality for the candidate’s experience. Any standard web language can be used; there are no limitations on the code that can be entered into the component.
Some possible examples:
The Custom Component is not intended for:
If you do not have the technical expertise in-house, SAP SuccessFactors Professional Services can develop custom plugins for you. They will also provide you with instructions for making modifications in the future, so that you can easily change text, images, colors, number of columns, and so on. Contact your SSEM for more information.
Be aware that writing custom plugins requires technical web development capability and carries with it a risk of breaking the CSB site. Custom plugins must be tested on all browsers and on all device types. Customers need a maintenance plan, because custom plugins need to be tested during every release cycle, because of changing web standards, for example. If used, we recommend creating a role within Career Site Builder with access to custom plugins and assigning it to your developers.
How can you tell if a page contains a custom plugin component? Right-click and View Page Source. Find (Ctrl-F) customPlugin.
The Featured Jobs component allows you to display high profile or high importance jobs on Career Site Builder pages.
The Featured Jobs component has three configuration tabs: Details, Menu, and Styles.
In the Details tabs, enter Header Text to describe the component. You can also add an optional button to this component which can link to all jobs, to other parts of the career site, or to external Web pages.
Add the links to category pages from the Menu tab. Links display in three columns within the component; this is not configurable.
In the Styles tab, you can configure the color of the links , the header text, and the background of the component.
The Google Job Map component maps a customer’s jobs in a map UI.
For jobs to appear on the maps component, the location data must be correctly configured.
Using the Styles tab, you can configure the color of bodies of water and other settings for the Google Job Map component.
You can customize the map that is displayed. For example, to display a map of Colorado:
Also note that Google Maps applies a default bias for application behavior towards the United States. If you would like to change how the map is presented, change the Region Code. See the Help text in CSB for details.
The Image and Text Carousel component allows you to add a gallery of images in slide format on a career site page, with accompanying text. Auto Focus places the focus on the image carousel when the slides advance. When the display interval is set to greater than 0 and auto focus is on, the focus repositions you to the active carousel regardless of where you are on the page.
The Image Carousel component displays images only, no text. In the image below, candidates select from the Image Carousel to view jobs for each of the company’s brands.
The Image Carousel component displays images only, no text. In this example, candidates select from the Image Carousel to view jobs for each of the company’s brands.
Image Carousel: Example 2
Some customers set the Display Interval to 0, in order to display a static set of images (does not rotate).
The Info and Subscribe Form component displays information about the company side by side with the Talent Community Subscribe form.
The Details tab provides many configuration options.
From the Styles tab, you can change the color of the text and background, or you can add a background image.
This component supports what web designers call large "Hero" type images on a website. This component allows one image to display across the page. Select the Image Position and Height.
The Search Bar component is a global setting that is added at the component level. You can enable the option to Search by Location, and change the background color (or image) for each brand.
The Subscribe Form component adds an email sign-up form for the Talent Community.
The subscribe form is a smaller page element within a box that’s the full width of the page. You cannot change the orientation of the subscribe form inside the box, or the size of the form.
From the Details tab, enter a title for the form and the desired body text. The Subscribe Form also contains a field for the user to enter their email address.
The Subscribe Form always includes a button to sign up for the Talent Community. You cannot hide this button, but can configure the text that displays on the button using the Button Text field. You can also specify whether the text is displayed above the entry boxes or as ghost text within the boxes.
From the Styles tab, select the background image and the color of the header and body text. To achieve a box that is almost transparent, as in this example from DSW, use the bottom slide control from Styles→Body Background.
The Text component is a single column of text. You cannot change the size or orientation of the component. As described earlier, in the Details tab, you will enter the text, and if desired, an embedded link or button. From the Styles tab, set the color of the text and background, or if desired, add a background image. The Disable Horizontal Padding setting works in conjunction with Enable Spacing by removing the 20 pixels of default spacing above and below the text, so the customer has more control over how the text displays on the page.
The Three Column Image with Caption component uses a set layout for information on the career site.
Each of the three columns in this component has several available features. In each of the columns, you can enter header text, upload an image, enter body text, or display a link. To show a link in the column, enable the Show Link option. You can then use the Edit Link menu to choose what type of link you would like to add, and the text that will display for the link.
You cannot adjust the width of the columns in the component or the size of the images. You can adjust the appearance of the component using the Styles tab.
The Two Columns component consists of an image and text. Text is entered on the Details tab. From the Styles tab, select the image plus the colors for the text and background of the component.
The options for Image Position normally apply to the full width of the component. For example, if you select Center, the image appears centered across the width of both columns. But if the Refine Image Alignment setting is enabled, the image never extends beyond 50% of the available screen, so it is never wider than half the page. Depending on your Image Position setting, this could mean that the image appears on the left or right half of the page, or the center 50% of the page. Text is always presented on the right.
The Two Columns component looks good in the Desktop view, but is less appealing in the Tablet view. On Mobile devices, the image is not displayed, only the copy.
The Video component allows you to add videos to Career Site Builder pages. Videos may be embedded from YouTube, Vimeo, and Wistia.
From the Details tab, choose whether the video is full width, or left or right-justified with text. Also decide whether you would like the video to auto-start. Select the background and font colors from the Styles tab.
Best Run wants to ensure that their career site follows general website leading practices and the recommendations for Career Site Builder sites.
Open your Best Run site and look for the following:
What options are available from the header?
On the home page, which components are used? Is the search bar and the option to Join the Talent Community (sometimes named Create a Job Alert) prominently located on that page?
On the job map, which countries are included?
On the search bar, which fields are available?
Search for a job and notice which fields are represented on the search results page.
Select a job to open the job description.
Does the site contain any video? Carousels?
Are brands represented?
Is the site localized into other languages?
Does the footer contain Top Jobs and View All Jobs? Are social network links included in the footer?
Many additional recruiting options are available from the SAP Store: https://store.sap.com/dcp/en/search/SAP%20SuccessFactors%20Recruiting
