Context aware custom component

Ideas
1

Is there a sample available or can one be provided for building a custom component that is context aware?  Ideally, this would allow for the “Context” tab to appear in the builder.

An example would be the map component in the tutorial section where the map only displays locations related to a parent item.  When placed in a drawer, the map would display all locations that are related to the parent row that is the context of the drawer.

Thank you!

2

Barry,

While we recognize that this would be helpful, we’re not ready yet to document and support the methods for showing the “Context” tab in a Component’s properties from the Page Composer, or for getting your Component’s runtime to take context Conditions into account.

I’m switching this to an Idea that is Under Consideration.

Zach

3

Thanks Zach and understood.  Look forward to seeing this when you guys are ready.  Here’s a couple of use cases we envision this for:

1) An order item has a delivery schedule which follows a route - We’d like to provide a map that graphically represents the route of that item within a drawer.

2) We have a custom component that builds essentially an HTML table of information.  The table is a transposed view of fields on a row.  For example, a item has a quantity in a user specified unit of measure and we calculate standard metric and US conversions.  We show Quantity in a single column in the table with the rows of the table being UOM, KG (metric standard), LB (US standard).

Thanks!

4

Hi Zack,

+1… (PractiFI would love this as well… we are currently using IFRAMES.)

5

Like Zach said, having the context properties category show up in the builder for custom components is not something we’re ready to expose yet.  However, if you just want your component to be aware of it’s current context row, then that’s pretty straightforward and can be done today.

If you’re registering your own components similar to below, the third argument is a reference to the component object for your component.  If the component is in some kind of context, it will have a context property.

skuid.componentType.register('mycustomcomponent',function(domElement,xmlConfig,component){<br>&nbsp; &nbsp; console.log(component.context);<br>&nbsp; &nbsp; domElement.text('Hello World');<br>});


If you’re just using the one-off custom component that comes as in the standard skuid library, should should be able to get the context like this…

var element = arguments[0],&nbsp; &nbsp; xmlDef = arguments[1],<br>&nbsp; &nbsp; component = arguments[2],<br> $ = skuid.$; <br>var context = component.context;<br>console.log(context);<br>element.text('hello world');


Does that help?

6

Hi Ben/Zach - Any updates on if/when exposing context to custom components might be available?  The workaround helps but having more control declaratively would make things much simpler.

Thanks!

7

Any update on this? It would be really useful to be able to add a custom component to a drawer.

8

Any updates on this one?  Thanks!

9

Would be awesome to have this

10

As a workaround to this, I think the following procedure might work:

  • create the conditions for the customComponent in question using, for example, an Image component's "Context" tab
  • save the page
  • scroll down, and "view page XML"
  • find and copy the ... subtree from within your temporary Image component
  • expand the tag to have a opening and closing tag like
  • graft in the tree
  • use Ben's "var context = component.context;" to get context on the runtime side of things