I have imported the accordion library ( which i downloaded from kony market ) but i am unable to use it properly

HCL Volt MX Volt MX Forum
1
This thread was migrated from an old forum. It may contain information that are no longer valid. For further assistance, please post a new question or open a support ticket from the Customer Support portal.

What i assume how it will work is " Row expansion and collapse will be taken care automatically " and also when i am adding the accordion only 1 header and 1 row is shown ,no master data is available , so how can i add other headers and rows.

2

HI,

master data can be set using the api exposed for the component. its explained in the documentation tab of the component. below is an excerpt from there:

setData

This API displays the Action Sheet by setting data.

Syntax

setData()

Parameters

  1. widgetDataMap: Specifies the mapping information between the widget id's and the keys in the data.

{

widgetID1: "dataId1",

widgetId2: "dataId2",

widgetId3: "dataId3",

}

Note:

Height and Top value of the Flex Header must be in same unit. i.e. if height is in dp then top should also be in dp and vice versa.

Data: Specifies the set of values that must be displayed on each row of the accordion. A user can set the data in two different format

  1. Format 1 : Set data for single template which can be created on the canvas.
  2. Format 2: set data for multiple template in which rows are driven be the template. User have to dynamically create the template.

Example of Format 1:

[

[

{dataId1:"foo", dataId2:"foo", dataId3:"foo"},

{dataId1:"bar", dataId2:"bar", dataId3:"bar"}

],

[

{dataId1:"foo", dataId2:"foo", dataId3:"foo"},

{dataId1:"bar", dataId2:"bar", dataId3:"bar"}

]

]

Example of Format 2:

[

[

{dataId1:"foo", dataId2:"foo", dataId3:"foo",},

{dataId1:"bar", dataId2:"bar", template:"template1"}

],

[

{dataId1:"foo", dataId2:"foo", dataId3:"foo"},

{dataId1:"bar", dataId2:"bar", template:"template2"}

]

]

Note:

template is a keyword.

widgetRef: This parameter must only be passed when user is using accordion with multiple templates. It contains the reference of the dynamic template that user had created.

{

"template1": flex1,

"template2": flex2

}

Note:

flex1 and flex2 are dynamically created flex container which contains widgets designed by user.

Return Value

None

Sample Code:

For Single Template

this.view.componentID.setData(widgetDataMap,data);

For Multiple Template

this.view.componentID.setData(widgetDataMap,data,widgetRef);

Please write back if you still not able to proceed further.