Pentaho CDE Dashboard Component Style Editing - javascript

I'm quite new to Pentaho dashboard develop and i have a problem with the component style.
For example, I added a table component to my dashboard.
In the "Advanced Properties -> Style" option of this table component, I select "bootstrap". Okay then the table component is automatically added some bootstrap style classes.
But, I want to remove one of those classes. I want to use jQuery.removeClass() to implement this but I don't know where should I put my js sentences.
Further more, if i want to do some other operation towards the generated table component using js, where should i put my js sentences.
I do not understand the workflow of pentaho cde dashboard so this question may seems a little silly. Thank you for your time!

You can put your code in Draw Function.
=> Your using Table component. By using java script code or jquery code you can manipulate the data in table component.
Example:
1. You want to sum of the row values.
2. You can hide the columns and rows.
Note: If you put some code in draw function. table component has convert sql result in to HTML table. Its like a normal HTML table.
Thank you.

Related

How to write custom select/checkmark logic for material-table, to include selected rows inside of detail panel nested material-table

I have a material-table component where I am rendering a nested materiel-table in the detail panel of each row. I would like to know if there is a way to include detail panel material-table rows in the functions offered by the package. I am mainly interested in the selection feature for now, but will likely need the same support for other functions like filtering, search, etc...
Now I know that Tree Data allows this since all rows are part of the same table. But I need to be able to do it with using the Detail Panel.
NB: For more clarity, here is a code sandbox I found with the nested table functionality.
So how would one go about adding their custom select function to a material-table, such as to include selected rows inside nested material-tables ?
The way to control the row checked state outside of the table, meaning without using the provided check box inputs, is demonstrated in a demo created after I asked the same question in the material-table-core repo. It's pretty straight forward and should help anyone trying to do the same : https://material-table-core.com/demos/selection/outside-of-table/

How can i display the table row that just got clicked, on another page?

I'm working on a website where you can see buildings on a map and where users can click on a table row (1) (where informations about the building is shown) to get redirected to the map page. Additionally, and thats where i'm stuck, the clicked table row should appear on the first page (2).
So the question is: how can i display the table row that just got clicked, on another page?
thanks for your help!
Pass the index of the row that is clicked as props
Even if it's difficult to answer to this question since it's very generic, I'll try to assume that you are missing the basic approach and need a starting point on how resolve this. Once you clicked on the row, you can pass the data to the new URL. Assuming that you are calling a new page, the row should be wrapped in an anchor element and in this case the data can be passed with a GET request, included in the URL. You can have a look to the W3school website page talking about GET method
to learn more about it.
If you are trying to do this as a single page application with react instead, start looking at React documentation on how components and props work to pass props down to other components.
Hope you find this helpful!

Implementing table support in draft js

I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
I have a solution for tables in draft-js that works pretty well for us. I do not use separate editors for each cell, just regular EditorBlocks that are all part of the main editor tree. There's a working example here https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte
I have a "TableCell" custom block type that primarily just renders a standard EditorBlock, but uses React.createPortal to render into the applicable table cell.
The information necessary to recreate the table structure is stored in the metadata of the first cell of the table.
When rendering the first block, I render its EditorBlock component wrapped in the full DOM structure of the table. The <th>/<td> tags for all but the first cell are empty, but are given a data attribute corresponding to their position in the table.
Then I use ReactDOM.createPortal when rendering each of the subsequent TableCell blocks into the correct position in the table.
As far as draft-js is concerned it's just rendering blocks in the usual linear fashion. This makes editing, managing selection state, & the import/export of html no more difficult than for any other block type for the most part. Though you do have to take precautions with selections and editing that cross into or out of the table.
I am using nested Editors in each cells (option 1). Implementing style functionalities inside each cells is much easier. You can use the functionalities you've already use in the 'main' Editor.
There are two main components in my implementation of table. The Table component, a custom block component. And inside each cell of that component is the Subeditor (a nested Editor component). The EditorState for each Subeditor is stored in a Redux store.
Selection handling between editors is quite a handful though.

Jenkins plugin advanced development

I am trying to create an advanced feature in jenkins plugin but no idea where to start.
I wanted to create a table which has dynamically row added with checkbox in one column and get value of those selected checkboxes.
Please help me out for.
a) generate dynamically table.
b) add checkbox in column and get checked value.
After a week of RnD. Jenkins tag library not provided so much control but it has one control that make us happy.
<f:block></f:block>
In this block we can create a table or other html controls.
For dynamically created rows and coloumns we should use javascript in <script /> tag it not requried type like in html.
Guys i tried jQuery but jenkin stapler not allow this, because sign of dollar is used for stapling classes in jenkin.
If you know the data for generating dynamic row then that's ok. but if your data is came from server side then we have to implement ajax functionality.
For ajax functionality in jenkins use this link.
"https://wiki.jenkins-ci.org/display/JENKINS/AJAX+with+JavaScript+proxy"

Creating a Custom Angular Smart-Table

a little new here (and new with angular) so go easy on me. I'm attempting to create a nice looking Angular Smart-Table, that has a few specific functions:
Bootstrap Table
Search Feature
Add to Table Feature
Export in Spreadsheet Pasteable Format
Dynamic Pie Graph based on Table Data
I am able to create a simple table, but I am having trouble with bootstrap styling and adding the features I mentioned above. If someone could point me in the right direction with how to learn this stuff, I'd really appreciate it.
Smart-table is a plugin which gives you full control over what and how to display. You may use the table tag if you want, or you may choose to implement the view using a div.
First lets look at a plunker using smart-table: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview
<table st-set-filter="customFilter" st-table="displayed" class="table table-bordered table-striped">
Here you may see the index.html displaying using bootstrap table. Also you may see a basic search feature (firstname and lastname) which comes built in and a couple of complex filters which lets you search using some more advanced rules than just text search.
When it comes to add to table, add a button in bottom to add a row, and use perhaps a modal dialog to input the required values. When saving, make sure you refresh the collection in the controller, there is a 2 way binding, so modifing collection will be reflected in your view.
For export and graphs, reuse the collection in your controller, this is not something which is part of smart-table, you should find different tools to help you with this.
Please note that if retrieving the collection is an asynchronous operation, you need to use the st-safe-src directive, look at the stSafeSrc header here: http://lorenzofox3.github.io/smart-table-website/#section-basics

Categories