Customer check out ui components

[former_member703173]

Hi Experts!

where can i found info about ui components to use in customer checkout ?

Until now i use some componentes like cco.LabelComponent, cco.ButtonComponent ..but i wnt to know what i have available...

so ...where can i found info about that

thank in advance

[JoergAldinger · Accepted solution]

Hello Raul,

You can use the following code to add a table with data:

var array = [];


// for each row:
array.push(
	new cco.TableRowData({
		ref: i.Ref1,
		...
	}));


this.table = new cco.TableModel(array);
this.colRef = new cco.TableColumn('No.', 'ref', 80,null);
...


// add to your screen like any other component:
component: cco.DataTableComponent,
	props: {
	   // bound the datamodel
	   model: this.table,
	   class: 'tableCellLayout',
	   showScrollButtons:false,
	   columnHeaderWidth: 70,
	   columnHeaderHeight: 100,
	   rowsPerPage: 8,
	   rowHeight: 50,
	   rowContainerHeight:0.5,
	   columnHeaderSizeDynamic: true,
	   columns: [
			this.colRef,
			...
	   ],
	   displayCols:[{
			   class: 'column',
			   hidden: false,
			   id: 'ref',
			   title: 'Ref'
		   },
		   ...
	   ]
   }

Hope this helps. You can find more information on Robert's blog as well as his gitlab sources.

Best regards,

Joerg.

[former_member703173 · Accepted solution]

Hi Joerg

One million Thanks !

That´s it was looking for!

kind regards

[JoergAldinger · Accepted solution]

You're welcome. Kindly accept as correct answer if it was helpful. 🙂

Also, not all properties are required, we actually comment out a few, but I guess you will get the idea of what each does and whether you need it. You can also "inspect" some of the existing tables to find stuff like how to right-align columns, etc.

Best regards,

Joerg.

[former_member703173 · Accepted solution]

Hi Joerg , Thanks ! Your code help me a lot of!

Only one question , i would like to manage events in rows table...¿its like a button event?

thanks in advance!

[JoergAldinger · Accepted solution]

Hello Raul,

Sorry, we haven't tried that yet. We have only worked with individual buttons in the dialog below the table. If you try it and it works, please post back, though! It may be useful for us in the future. 🙂

Best regards,

Joerg.

[Klaus_Frick]

Hello raul_campo

Open the developer tools of Chrome/Edge when running a CCO. Then in the console type cco. and you can see may components that you could use....

Best Regards
Klaus

[former_member703173]

Hi Klaus Thanks for the info!

What I am looking for is an example of building a table, so far I have been able to build a GUI that simulates a table, but it is not what I want I attach an image of what I did

Thanks in advance

falsetable.jpg

[RicardoRenteria]

Hi all,

how can I know the properties of the components? I don't find documentacion. For example, I need to know the properties of CheckboxComponent. I followed the suggestion from Klaus and I can see the diferent components, but ¿how about their properties to code them in a plugin?

Maybe joerg.ceo kfrick raul_campo have any suggestions?

Thanks in advance.

[former_member703173]

Hi experts.

Finally i found how to get data from selected rows in table

Try this! add this code after..

rowTrackId: (t,e) => {

console.log("rowTrackId seleccionado ["+e.meta.selected+"]");

if(e.meta.selected===true) {

//debugger;

console.log("Elemento Seleccionado ["+e.values[0].value+"]");

}

},