Create a floating widget in employee center portal

[Harsha Pappala]

In Employee center, there is a widget performance indicator which is present in all pages and floats on left hand side, 

is there a possibility to copy this functionality for another custom widget 

[ChrisBurks]

@Harsha Pappala- I should have paid more attention to the title of your post. The functionality of making the element float is CSS styling. More specifically using a combination of position: fixed, a z-index so that it shows on top and doesn't get blocked by other elements, and top: ?px, left: ?px,  right: ?px, or bottom: ?px depending upon where the element sits in relation to the nearest positioned element in its hierarchy.

for example it might look like this in your styling:

<CSS Selector here> {
      position: fixed;
      left: 5px;
      bottom: 0;
      z-index: 200;
}

This example is stating that the element should sit at the lower left about 5px away from the left side. It's also setting the z-index or the layer if you will sitting at 200 assuming all the other elements that could cross its plane would sit at a lower z-index.

Here is a resource about setting fixed positioning:

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#fixed_positioning

https://css-tricks.com/almanac/properties/p/position/#aa-fixed

[Harsha Pappala]

@ChrisBurks thanks for the css styling, I am trying to trigger a survey after click and assign to the user, planning to use snc create Assessments function, but is there a widget which can render the survey itself ? 

[Harsha Pappala]

@ChrisBurks 

I was not able to render a survey in a widget, there is a an old widget "take survey deprecated", which i am trying to send the widget parameters to and show it in esc portal.

Using advanced portal navigation (sn_ex_sp_portal_extensible_navigation) and this docs link 

Not sure how to pass widget parameters.. to widget and so that it renders the survey on click of a menu item 

Currently i have this

[ChrisBurks]

Hi @Harsha Pappala ,

There are a few things to note.

1.  I'm not sure you can go this route because rendering a survey or an assessment would take dynamic parameters. The advanced menu setup seems to be static. You could possibly create a custom widget that wraps the newer widget (see number 2 below) that gets the latest survey for that user to take and passes the parameters (it takes a parameter of "type_id or instance_id" to the embedded one.
2. The newer survey/assessment widget to use is named "Surveys and Assessments"
   1. It exits and two different pages; one for surveys (id=take_survey) and another for assessments (id=take_assessment). These pages take a parameter of either the type_id or the instance_id. The difference is the type_id is generic and tells the widget to go get the earliest survey of this type. The instance_id tells the widget to display that specific instance of the survey.
3. There is another option that can be taken if you don't want custom, if you want to use the advanced portal navigation feature, and if you don't mind the user picking which survey to take that is assigned to them. And that is to use the "My Surveys" widget.

Advanced Portal Navigation setup

Rendedered

[Harsha Pappala]

@ChrisBurks Thanks for the reply and your insights. 

I kind of have to take the second options i think, because i have to assign the survey on the fly after the user clicks on the menu item. 

assigned the survey to the users and embedded the take-survey widget in a custom widget

body HTML 

<sp-widget widget="data.widgetSurvey"></sp-widget>

This is in the server script 

data.widgetSurvey = $sp.getWidget("take-survey", {

            type_id: '',

            instance_id: '502a2c44d7211100158ba6859e6103a3'

        });