Context aware custom component

  • 7
  • Idea
  • Updated 2 years ago
  • Under Consideration
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!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 4 years ago

  • 7
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
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
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
Photo of Dan Arnison

Dan Arnison

  • 320 Points 250 badge 2x thumb
Hi Zack,

+1... (PractiFI would love this as well... we are currently using IFRAMES.)
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
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){
    console.log(component.context);
    domElement.text('Hello World');
});

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],    
    xmlDef = arguments[1],
    component = arguments[2],
$ = skuid.$;
var context = component.context;
console.log(context);
element.text('hello world');

Does that help?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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!
(Edited)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Any update on this? It would be really useful to be able to add a custom component to a drawer.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Any updates on this one?  Thanks!
Photo of Shmuel Kamensky

Shmuel Kamensky, Champion

  • 4,328 Points 4k badge 2x thumb
Would be awesome to have this
Photo of mB Andréas K.LeF

mB Andréas K.LeF

  • 1,244 Points 1k badge 2x thumb
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 <conditions>...</conditions>  subtree from within your temporary Image component
  • expand the <custom ...> tag to have a opening and closing tag like <custom name="..."></custom>
  • graft in the <conditions> tree
  • use Ben's "var context = component.context;" to get context on the runtime side of things
(Edited)