Forum Discussion

mbiel's avatar
mbiel
Expert
6 years ago

Load a lithium component with context via ajax

Hi,

based on this post: https://lithosphere.lithium.com/t5/Developer-Discussion/Click-to-load-a-component/m-p/168251/highlight/true#M6741

i wanted to load several lithium components asynchronously. The problem is, that most of them require additional paramaters and context to work properly.

An example is the widget 'recommended-content-taplet' which shows recommended posts related to the currently viewed one and which is already used by the platform:

 

LITHIUM.Components.renderInPlace('recommendations.widget.recommended-content-taplet', {
  "componentParams" : {mode : "slim", componentId : "recommendations.widget.recommended-content-taplet"},
  "componentId" : "recommendations.widget.recommended-content-taplet"
}, {
  "errorMessage" : "Ein unerwarteter Fehler ist aufgetreten.",
  "type" : "POST",
  "url" : "/t5/forums/v4/forumtopicpage.recommendedcontenttaplet:lazyrender?t:ac=board-id/155/message-id/29447/thread-id/29447&t:cp=recommendations/contributions/page"
}, 'recommendedContentTaplet_shell', '#recommendedContentTaplet', '#recommendedContentTaplet_container');

I understood, that component parameters can be passed in componentParams.

But how does this context work? Obviously the loaded component gets it's context (to which message) with the passed url. 
Can anybody explain how this url works (which parameters/values can be used etc.)?
Is it possible to get a user context (of course only public information) e.g. for a call for 'kudos.widget.messages-recently-kudoed-by-user' to load this widget related to another user than myself?

'

 

    • AdamA's avatar
      AdamA
      Khoros Oracle
      5 years ago

      > I understood, that component parameters can be passed in componentParams.

      We do allow parameters to be passed to components, however they are intended to be at the top level of the second argument, not under a property named componentParams (see example below under Example 1 below).

      > But how does this context work? Obviously the loaded component gets it's context (to which message) with the passed url. 

      There are two ways in which the component may get context: 1.) from the parameters that are passed as part of the second argument, 2.) from the page URL where the component JS is called. Please note, it is currently not possible to pass in a URL to the LITHIUM.Components JS API that will attempt to use that as the context for rendering the component.

      > Can anybody explain how this url works (which parameters/values can be used etc.)?

      I will assume you/they are asking how the URL in the third argument from their example is intended to work. Answer: it is not intended to work and currently not supported. If this was provided as an example in our documentation please let us know so the we can remove it.

      > Is it possible to get a user context (of course only public information) e.g. for a call for 'kudos.widget.messages-recently-kudoed-by-user' to load this widget related to another user than myself?

      No, the only supported parameters for this component is "mode". Similar to the "recommendations.widget.recommended-content-taplet" component this component will get the context of the user from the URL of the originally rendering page. If no user is specified in the page URL then it will fallback to the current user.

      There are some other issues with the sample code in the original question:

       

      • There should not be a "componentId" property passed in the second argument.
      • The URL should not be overridden in the third argument. This is not supported and will currently not work. We also do not support parameterization via this URL.
      • We do not support var-args for the last argument. So, the fourth and final argument should be the ID name of the element to be updated. Arguments after the fourth will be ignored.

      Please see the Example below with an updated code sample that addresses these issues.

      Example:

      I update the code sample provided in the original question with the appropriate objects passed into each argument. In the case of the "recommendations.widget.recommended-content-taplet" component, the only supported parameter is "mode" which can either be a value of "slim" or "wide".

      This component will use the subject of the message from the page where the LITHIUM.Components JS is called from to determine the search term used when searching for other messages in the community. If there there is no message for the current page, then the component will not render. Example of pages that have the context of a message on them: ForumPage, ForumTopicPage, BlogPage, BlogArticlePage, etc.

       

      LITHIUM.Components.renderInPlace('recommendations.widget.recommended-content-taplet', { mode : "slim" }, {
  "errorMessage" : "Ein unerwarteter Fehler ist aufgetreten.",
}, 'id-of-element-to-update');