Creating a Custom Angular Smart-Table - javascript

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

Related

Bluebeam Scripting - Custom Columns, Markups, & Forms

BLUEBEAM AND ADOBE ARE BOTH PDF VIEWERS THAT HAVE A LOT OF SIMILARITIES
Hello, I am trying to figure out how to link a form answer to some markups (tools).
Custom Columns that are created In Bluebeam:
When I create a new tool I can manually fill out all of these custom columns under the "Custom" section within the settings of a tool:
Then I can save that tool and all of the data will be repeated for every copy of that tool. However, the circled columns in the first picture would be changing on every page. Which means I would have to make a new tool for every page. (FYI I would be making ~20 tools for this, so I would have to update 20 tools every single page ;_;) Therefore, I want to create a dropdown/textbox on each page with those columns. When a user fills out the dropdown/textbox, the markups are automatically updated with that info, which means the custom columns are also updated.
Does anyone have an idea of how to link these?
As of now I have been able to create a code that creates a popup if a user selects a certain drop down. This shows me that you can grab the data from a user. I just don't know how to connect that data to all the markups (tools). I know each markup has a special ID, but I'm curious if you can somehow link to the tools "subject" property to do this.
Bluebeam provided me with their JavaScript API if that is any help.
https://i.stack.imgur.com/yEdU1.jpg (I got this image from this post JavaScript Library with Bluebeam)
UPDATE
I found another document with potential accepted scripts for Bluebeam. Please note this one will require people to have Bluebeam Revu eXtreme
https://support.bluebeam.com/wp-content/uploads/2019/08/Bluebeam-Script-Reference-2018.pdf
This version actually has a markup section (which are the things I am more or less wanting to have the custom columns be updated for with the user input)
This document seems to be relevant only for the Bluebeam Script Editor. You can open it by looking in the folder for Bluebeam from your start window.
There are 2 issues I have with this though. I haven't figured out how to run the codes I have in the script inside of Bluebeam yet and I am curious if there is a way to not need the markupID's and/or a way to get them without having to download the markups
I've been lurking on stack for so long, I finally have something to contribute...
I work with custom columns and toolsets all the time. I think you're missing a basic understanding of what the markup list is. Or maybe I am. The markup list is the table of data at the bottom of Bluebeam, where you're trying to change column headings.
The markup list is basically a table of data, what you're trying to do will change the column headers per page, which would change it for all entries. From what I know about Bluebeam, these are static, just like any database or table in any application like Excel. If you need to have different column headings, you need to just stack them all and use what you need on each page or from tool to tool. Or create different profiles with different custom columns, but this gets messy having multiple profiles accessing a single document. Maybe java can help show and hide these per what's relevant on the page within the custom field. But... I think the java is limited to be used within PDF form fields and some basic PDF actions such as print, save, etc. I don't think the level of coding you're looking for exists within Bluebeam.
I use profiles to manage custom columns per process, not the actual tool. It's kind of unclear exactly why the custom columns can follow the tools without the actual profile though.
What I do to accomplish complex tasks is export the markup list and build something within Excel VBA to tabulate data and export reports with relevant information. I'm sure you could use basically any coding language to accomplish this after the table is exported from Bluebeam.

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/

Better way to create a paginated list of divs

Problem:I need to create a list of "divs" which will contain information regarding hostels (profile picture, a button to book a room there and some short info). This list will be dynamically created through a query to a database. The list should be paginated and only show the first n hostels by making Ajax calls to the db.
My solution: Have a template div created iteratively. Use javascript to implement the pagination requirement.
My question: Does my invent the wheel solution make sense? Or am I better off using some existing library/framework to achieve this if yes any suggestion regarding existing tool would be appreciated (It might be off topic but have failed to find a single library to achieve this).
normal table with one column and three rows
table with one column but splitted rows
There are plenty of libraries available to achieve it, one of which I used is
datatables.js
and is working fine. Has option for paging, sorting searching etc.
Just to give an idea based on your design, you can have a single column table which can have the template of your div (datatables give option to define template for your column) and then you can define sorting as well based on some of your fields data.
Paging it does automatically but you can still configure it.
It also has feature of searching, so you can give option to search for particular hostel or price or anything.

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"

AngularJS ng-table with pagination: no rows displayed

I'm trying to use ng-table (http://bazalt-cms.com/ng-table/) in a web app based onto Typescript and AngularJS. I just have to display in a paged table some 50-500 items at most, all loaded at once from the server; so I'll what I need is client-side paging of my controller's data. Yet, no row is displayed when my data are loaded, unless I totally disable paging.
I made a plunkr which reproduces the issue:
http://plnkr.co/edit/0hCSMm03L8iHwePccm7x?p=preview
As I'm using Typescript (but there is no definition for this lib right now), I've shaped my example code like a typical outcome of the TS compiler, but apart from that, I followed the paging example in the ng-table website. Just click the button to fill the controller's data.
Update: by examining the ng-table source I managed to force the refresh by calling tableParams.total(...) and then tableParams.reload() after I have filled my data array; yet, there is no trace of this code in the samples so I'm feeling a bit wrong about this.
I used that too (i.e. update the total and reload the table). I reasoned that I had created an instance of a table and then I needed to update the instance with the new information. hth

Categories