Slate widget in Workshop

[robind]

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.

[comew]

Hi @robind,

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

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;
	}
}

[VincentF]

Here is a tested example.

CSS for the slider, to take the whole space:

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

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

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}}
}

And in Workshop:

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}}

[robind]

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.

[VincentF]

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”

[slaczay]

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

[mohan]

Thanks, this was really helpful. Can you please help with the steps for other way around, I mean passing variable from Workshop to slate & get that variable value in slate as parameter for querying a dataset ? Thanks in Advance

[VincentF]

This is documented there and very similar to the answer above, just the other way around: https://www.palantir.com/docs/foundry/workshop/widgets-iframe#input-parameters

[mohan]

@VincentF I did try that but it’s not clear how to get it as variable within slate. Event is clear Slate.getMessage but what about action, what should we configure to store the value in Variable.

Actually, in the use-case I am working. I wanted to change the min-max of slider. It’s possible by writing a query & assigning it directly in min-max values within slider config. However to do that, I first need to get the values passed from Workshop in slate & then would be able to modify the slider config.

Thanks.

[VincentF]

This is the relevant part of the docs:

“v_objectSet” is a variable on Slate. So:

• the event is an incoming message (from Workshop)
• the action is “set a variable value”
• The content of the event, the javascript you see, is how to extract the payload from Workshop down to what you want to store in the variable (in this case, get the value of the key you specified in Workshop, stored and transmitted as a dict)

Hope this helps !

[mohan]

Thank @VincentF however I had already tested this but it wasn’t working, don’t know where am I making the mistake. Sorry to trouble you but can you please check the snapshot & let me know what should I modify.

[VincentF]

I assume you display the variable in the Slate when embedded ? you won’t see the value in the bottom right panel in edit mode.
You can create a HTML widget with {{v_var_1}} as content to display it.