Integrate postit-js with bpmn modeler? - javascript

I have been looking on how to add Postit-js functions on my currently existing bpmn, as I googled, I’ve got into " Custom Elements in bpmn-js" but I am not sure if that’s how I’d do it since postit-js already exists… the goal would be to add Post-it functions on my BPMN “tool bar”/properties panel… is it possible? Are there any directions I could follow to make it happen?
And should that be way too complicated - is it possible to have both post-it properties panel AND bpmn panel coexisting?
Add this "toolbars" functionalities into BPMN-js 'toolbar'

Related

How to put button in SAPUI5 quickview?

I have a sapui5 QuickView, which looks something like this:
<QuickView id="quickView">
<QuickViewPage pageId="PageId123">
<QuickViewGroup>
<QuickViewGroupElement label="Material" value="{Material}" type="{sap.m.QuickViewGroupElementType.text}"></QuickViewGroupElement>
</QuickViewGroup>
</QuickViewPage>
</QuickView>
Now, I want to add a button in bottom of Quickview. Is it possible? I tried adding
<Button icon="sap-icon://action"> </<Button>
But this does not work somehow. Is there any way I can add button? Thanks in advance.
It's not possible.
According to Fiori Design Guidelines
The quick view is similar to a popover, but has a predefined structure, a fixed set of UI elements, and automatic UI rendering.
(...)
Do not use the quick view if:
You want to provide information in a way other than displaying it in groups.
Basically this can be understood checking the Type of the following aggregations:
pages from class sap.m.QuickView
groups from class sap.m.QuickViewPage
elements from class sap.m.QuickViewGroup
Finally, class sap.m.QuickViewGroupElement is not a container that allows you to add controls (like a Button) inside it.
So, you should use a Popover like in this sample from the documentation
Use a View. Put a button first and then add a QuickView as fragment. There is an example in the UI5 Demo Kit.
https://sapui5.hana.ondemand.com/sdk/#/entity/sap.m.QuickViewCard/sample/sap.m.sample.QuickViewCard

Pivottable like HTML constructor without aggregation to show grouped elements

I'm trying to build an HTML component that will provide a pivottable-like view on my data, but with custom html elements inside the pivotarea rather than a sum or count; in the example below I'll just use a string of text, but I'd like it to be any HTML element (img, div, text etc.).
I'm finding it difficult to choose a direction, writing my own code to generate it (with jQuery) or using a library like Pivottable. I've tried the latter, but couldn't even find the proper direction w.r.t. customizing the aggregator function.
I could see myself re-using the html generated by js pivottable (with a simple count) and appending items afterwards in jQuery, but this seems like a rather hacky solution, along with a lack of customization options. Pros of this approach include the fact that at some point I'd like to include filtering/customization of the colums in the web-ui.
What am I looking for? Given a JSON array with multiple rows having attributes [Columngroup1, Columngroup2], and [Rowgroup 1, rowgroup2, rowgroup3], I'd like to layout it according as following (built in Tableau):
In the example above, [Businessline, Type, Product] are the Row-groups and [Active_or_roadmap, Roadmap Quarter] are the column groups. The granularity of the dataset is one level deeper, each 'Product' can consist of multiple subproducts, which should be placed either in the 'active' column (period header) or one of the roadmap quarter columns. This can be seen by subproducts 15.03 and 15.01 being grouped in the same 'row' visually.
What difficulties am I facing?
Do I use an HTML table for this, should I go with divs with classes indicating the rows/column, or a combination of both? Added complexity: at some point I'd like the non-header columns to be 'scrollable' horizontally (if too wide).
In a situation where I'd like to filter out some rows, should I regenerate the entire table or (mis)use visibility:hidden? In the latter case: how would I deal with a Product group being partially filtered (i.e. subproduct 15.01 should not be visible, subproduct 15.03 does need to be visible)
How would I 'embed' the object details in the DOM element? i.e., in the case of a hover/clickevent, how would I know which row in the JSON object corresponds to the name that was clicked?
Note that I'm not necessarily looking for an answer that fully does what I'm saying above, I'm primarily looking for a direction w.r.t. the code to go from the JSON to the above table in a structurally decent and flexible manner.
Any help is greatly appreciated, I have a codepen that contains some sample data and a rather poor attempt.
function load_data(callback){
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json', function(data){
callback(data)
});
}
I'm thinking something like this
{[
{productTitle:"Product 01.01",state:"Active","quarter":"2017Q1"},
{productTitle:"Product 01.02",state:"Roadmap","quarter":"none"}
]}
With this you should be able to loop over the array and place each element. I would use custom divs. First loop over the quarters and build those out. The loop over the state and filter grabbing the ones you need. Put the filtered results in a new var and sort it. The place each item in the proper column position as you are building out your rows. Then repeat with the next state.
Hope this make sense.
I think that managing that complex structure could force you to think of this table as a embeded components. Thinking of that maybe React (https://facebook.github.io/react/) could be appropriate solution for that.
Thinking about extending existing library is crucial for making this cost-effective, so please see https://react.rocks/example/orb (http://github.com/nnajm/orb) that maybe could be easier to extend using component matter of React that was used there.

HTML carousel/slide show on apples website

I found this carousel on apples website where it has the 3 radio presenters, and was wondering how i could create this effect or if there is a carousel like this available.
I did some research and found a similar stackoverflow question which links to slick.js so I am wondering if apple use slick and have customized it to do this or they found a new carousel that makes this effect occur.
From inspecting the carousel i found the class zine-gallery-content but searching that didn't help.
Does anyone know how i can make this carousel? It is also responsive.
It looks custom to me. They've called it 'ac-gallery' within their code. They tend to prepend things with ac-, ac-analytics, etc.
I'll let you know how I figured this out. I inspected the slider and was looking for a wrapper class or ID with the words 'gallery', 'carousel', 'slider' or something similar. I noticed the carousel contained the ID #zine-gallery. I then looked for one of their javascript files that looked like the primary file where most of the code is compiled to. I found a file called main.built.js. I opened this file and searched for zine-gallery, which did exist. I then opened my web inspector, opened the "Sources" tab and found main.built.js. I then clicked the "Pretty Print" button (The {} icon next to the line and column number. This formats the uglified javascript and allows you to read it more easily.
The following leads me to believe it's custom:
this.gallery = B.create({
id: this.galleryId,
el: this.wrapper,
section: this,
model: this.slides,
triggerSelector: this.triggerSelector,
trigger: {
events: ["mouseover", "click"]
}
})
Usually a plugin would include it's name in the creation process. Also, right below the following gallery methods are defined:
C._removeActiveStates,
C._animateNewStation,
C._blendToNewBackgroundColor,
C.activate,
C.deactivate,
C.animateIn,
C.onRequestAnimationFrame,
C.onScroll,
C.onResize, etc.

How does the example variableInputs for Processing 2.0 javaScript mode works? How to tweak?

I'm using Processing.org looking at the example variableInputs in javaScript mode (can't find it online, but it is included with the download)
It has two tabs, one java and one .js. And a cool example on how to pass data around both.
In the first tab there are some HTML/CSS commented out. Those are building the page when I hit run...
How's that working?
Is it possible to have for instance more than one drop down menu (selector) side by side? I managed to have them, but always one below the another.
Is the way to go to edit the html in the first tab?
help?
do you need me to copy and paste the example here?
[EDIT]
When I hit export, the PDE exports:
index.html
processing.js //(the library it self)
interface.js //(the second tab in the PDE)
sketchName.pde //(the usual pde)
The html tags from above the code are included in index.html, so it can be edited there. Not sure though this is inserted in the html page. So putting the menus side by side turns out to be a HTML question I think... What i also don't know how to do :), but I'll look for it
[edit2] or perhaps a javaScript question... As is interface.js that is making th econtrols... How to control the position of them?
[edit3] well tuns out that the line
<form id="form-form"><!-- empty --></form>
is doing the link, via th id form-form...
Still is it possible to have some menus side by side inatead of one below another?
It is indeed a css/html issue as bfavaretto suggests. In order to do what you asked for try this:
style section in comments (java tab), essentially you have to make the two drop downs' width smaller (45%) and then css hacks to bring them inline, float:left or right
* <style>textarea,input,label,select{display:block;width:95%}select{width:45%;clear:none;float:left}
* input[type=checkbox],input[type=radio]{width: auto}textarea{height:5em},</style>
setController() method, add another ctrl.addMenu(); as such:
element = ctlr.addMenu( "theMenu", menuItems );
element = ctlr.addMenu( "theMenau", menuItems );
The problem after this is that the two labels block the two menus from coming in-line thus you probably have to remove them from these elements and add them manually. In the javascript tab comment out line 157:
//form.appendChild(label);
This line is in function this.addSelection = function ( l, o ) {

jsPlumb and dynamically added containers

Since there's no jsPlumb forum anywhere I hope someone here can help me.
I want to generate this graph from some data I get from a JSON-API, what this API gives me are "devices" with a name and multiple sinks/sources, which I want to display as a list with the device-name in the first row.
So I thought I'd use some JQuery to generate these divs and add the jsPlumb-endpoints I need to the device. Unfortunately I can only get endpoints on existing divs to work but not on my dynamically generated ones. Firebug shows me the error "myOffset is null" in the addEndpoint function and I don't really see anything that's wrong.
I made a fiddle of it here: http://jsfiddle.net/2mcD2/4/
Id of an element is invalid, : is not allowed in ids.
jQuery("#source:foo") // will not work
jQuery("*[id='source:foo']") // will work, but you'll need to modify `jsPlumb` code in order to make it work this way
Solution: do not use : in ids. _ and - are ok.
there's a jsPlumb group here:
https://groups.google.com/forum/?fromgroups#!forum/jsplumb

Categories

Resources