Slate widget in Workshop

Ask the Community
,
1

Are there any step by step instructions for getting a Slate slider into Workshop? This is what I have done:

  1. Created a Slate app and added a slider and set the parameters as required - looks ok
  2. In Workshop, I have added an iFrame and selected Slate / iFrame embed - I can see the slider
  3. Added an output parameter (string variable) to the Slate slider in Workshop and called this slider_output
  4. To test, I have created a metric card and am displaying a string and pointing it to slider_output

I get “-” for the metric card so something is not working and I also have a very large canvas around the slider, I don’t know how to reduce this to showing just the slider.
Thanks.

2

Hi @robind,

Have you set an event to pass the output parameter (see docs)?
Like this for instance:
image

And regarding the canvas around the slider, you could add the following CSS styles to your Slate app to make it responsive and have the widget take the whole Canvas (with the widget w_slider_1 at the root of the Slate Canvas):

// Utility Classes
// ===============

.u-posFullScreen {
    position : absolute !important;
    top      : 0 !important;
    bottom   : 0 !important;
    left     : 0 !important;
    right    : 0 !important;
}

.u-fluidSize {
    height : auto !important;
    width  : auto !important;
}


// Style Resets
// ============

body {
    min-width: initial;
}

sl-app-canvas {
    
    // Miscellaneous
    overflow : hidden !important;
}

// 
// Expand the Slate document canvas to take up
// the full screen.
// 
sl-app-canvas .canvas-body {
    
    // Position
    .u-posFullScreen();
    
    // Box Model
    .u-fluidSize();
    
    // Miscellaneous
    overflow : hidden !important;
}

// 
// Expand the root table widget to take up the
// full screen.
// 
#widget-w_slider_1 {
	
	// Position
	.u-posFullScreen();
	
	// Box Model
	.u-fluidSize();

	sl-app-container {
		background : none;
		border     : none;
	}
}
1 Like
3

Here is a tested example.

CSS for the slider, to take the whole space:

position:absolute;
top:1;
left:0;
height:100%;
width:100%;

image

Then I have a function to convert the slider value to a string
return {{w_slider_1.from}}.toString()
image

Then I created an event as written in the other answer

console.log({{f_convert_to_str}})
return {
    type: "WORKSHOP//SET_OUTPUT_VALUE",
    outputParameterKey: "slider_value",
    value: {{f_convert_to_str}}
}

image
image868Ă—159 21.2 KB

And in Workshop:

image
image898Ă—518 43.2 KB

Debugging tips:

  • console.log let you log information in the console of your browser, which helps for debugging
  • Adding a HTML widget helps to debug as well
from={{w_slider_1.from}}
to={{w_slider_1.to}}

string:{{f_convert_to_str}}

image

2 Likes
4

Thanks both! Because its an iframe, the Slate edit box is displayed in the top right of the widget in Workshop but apart from that its working as expected.

5

You can disable the “action” dropdown to show up, by navigating, in edit more of your Slate, top right, settings and “disable Action dropdown in view mode”

1 Like
6

cross posting - how to hide the “Action dropdown” https://community.palantir.com/t/how-can-i-hide-the-actions-drop-down-when-viewing-a-slate/463

1 Like