Matthew Oatts
I’d like to download the SPARK UI Toolkit. How can I get access to it?
Matthew Oatts
On a table row – can I replace the “add row” with a button?
Matthew Oatts
On a table row – can I replace the “X” for delete (on right right hand side of the row). With something else…an icon or something?
Matthew Oatts
What versions of IE are supported, does it have to be compatibility mode?
SPARK Support
The delete button style is found in the BPMExt-Control-Table.css file. Since it uses Font Awesome icons, you can change it to whatever you want by overriding the CSS.
<style>
td.RowDel:before {
content: “\f072”; <———this is a font awesome unicode (plane in this example).
font-family: FontAwesome;
font-size: 17px;
font-weight: 400!important;
line-height: 20px;
color: #9D6E6E;
}
</style>
You get this result:
However, our SPARK developers really like the idea of adding a configuration option to specify what icon you want for delete, so we’ve created a feature request to be delivered in an upcoming release!
SPARK Support
IE 10 and higher is required. IE9 works with some controls, but some issues will occur. IBM BPM dictates that compatibility mode is required, meaning BPM 8.5.6 will force IE11 to IE 10 compatibility mode… and SPARK works perfectly fine in that scenario.
Other supported browsers are Firefox, Chrome, and Safari for iOS.
SPARK Support
There is no add row button that comes with the table control. However, SPARK makes it very easy to add a row by using our improved event handling. This means that you can add a row to a table with one line of code placed in ANY event that comes with a control… not just a button!
One of the simplest ways to add a row to add a SPARK button to your coach (or coach view) and then use an invoke the appendElement() method for the table. See the attachments for an example where we have an ‘Add’ Button for our ‘Table4’ table control:
Note: The On Click event code is… ${Table4}.appendElement({})
SPARK Support
See the Adding Rows to a Table Dynamically article here for additional information.
Dave Wakeman
I am trying to use the SPARK controls in a new process application with BPM 8.5.6. I create a heritage human service and added some SPARK controls (Responsive Sensor, Vertical Layout, Table Layout, Table Layout Row, Table Layout Cell, Panel, Text, etc.). When I try to run the service I keep getting a blank page. In the browser console I can see that it is getting a 404 error trying to load utilities.js during the call to initialize the control. It doesn’t seem to matter which SPARK controls I use, as soon as I add one to the coach it fails, even if I have other non-SPARK controls on the page.
Upon further investigation it would appear that the SPARK toolkit has a “soft” dependency on the Coaches toolkit that ships with BPM. In my case, since I was replicating a coach I had created with the Responsive Coaches tech preview toolkit I had removed the Coaches toolkit so that I wouldn’t inadvertently use them. It would seem that the SPARK toolkit assumes that the Coaches toolkit will be part of the process application. When I added the Coaches toolkit back into my process application the SPARK controls worked just fine.
I will admit that it was a bit unorthodox to remove the Coaches toolkit, but the truth is that my coaches worked just fine with only the Responsive Coaches toolkit. Does the SPARK toolkit really have a dependency on the Coaches toolkit? If so, why is that the case?
Thanks!
– Dave Wakeman
Stephen Perez
The SPARK toolkit does indeed have a dependency on the default Coaches toolkit; specifically, there is a dependency on that utilities.js file in many of the controls, as that file provides several useful methods for controlling behavior and appearance in the SPARK toolkit. The existence of this dependency means that you will have to keep the stock Coaches toolkit installed.
If you don’t want the stock toolkit to show up in the list of controls while building your coaches, either because you want to make sure you don’t accidentally use them, or because it’s just more stuff to sort through, you can easily filter them out at the top of the same panel. All controls in the SPARK toolkit have tags that end with an asterisk (*), which serves to both, make them easily identifiable in the filter, as well as differentiate them from the stock Coaches toolkit tags, while still retaining the same categories.
I hope this both answers your question about the dependency, as well as helping you to work around it 🙂
Elliot
What is the difference between the customHTML control and the CSS Style controls?
How do I populate a list for the Single Select Control?
1) customHTML allows for customized JavaScript commands and functions within script tags <script></script>
2) customHTML also allows for style tags if you want to override a class or create a new one for a control. <style></style>
3) CSS Control – In the CSS control, you can inport a css file as a web, external, server, or design. To have a control reference a class, have a reference in the HTML Attributes.
While customHTML allows you to type css directly into the HTML section. The CSS control provides flexibility to developers that want to import css files through different mediums; which can then have controls reference classes.
Essentially, customHTML and the CSS control provides very similar functionality, but the CSS Control provide an additional convenience for developers.
1) Ajax Service
2) Data Mapping
3) Static List
Ajax: In order to use the Ajax Service you must first select “Items From Service” under Item Lookup Mode. Then you would attach an Ajax service to List items Service. Within the Ajax service you would use a script to pass out data.
Data Mapping: You can create a list for the single select with data mapping, you would map simple type(list) or complex object(list) to the field Item List. Under data mapping, put in the properties using the variables that you have defined.
Static List – drop down the static list in the configuration options and input values in Name and Value
Stephen Perez
I have a service where users need to upload multiple files. Is there any way I can allow them to drag and drop these into the coach?
The Dropzone control allow users to drag and drop files of different formats. Please see the BPM-File-Dropzone article.
EQuintanilla
How do I make the page layout dynamic (to adjust depending on screen size)?
There are two different ways to have dynamic page formats:
The Page Layout controls allow developers to determine the percentage(%) of a page that a control can take up, given different width and height adjustment and/or mobile devices; whereas the Responsive Sensor Control allows for “stricter”/more defined rules. In the article for Responsive Sensor you can see that the rules defined in the control determines how the controls are affected in Horizontal Layout. It is essentially saying that “When the screen is 600px”, stack the controls vertically (along with other specifications).”
Chuck
May be missing something simple here. From JavaScript I can easily show or hide a control. What I need to do is to be able to set a Text or Text Area widget to read only. I’m not seeing the method for that. Pls advise. Thanks. Chuck Johnson
Chuck
Posted to the wrong forum – should be in the UI Toolkit Controls
Also, just remembered that you can do this with the Visibility Property/Script. But, still would like to know if it can be done from JavaScript. Thx, CJ
How to create a drop down menu?
That is a great question Dan!
I would use a popup menu. Then put an input group into the popup menu.
This will be the result of the drop-down menu:
1. Layout to contain the popup menu
2. Popup Menu
Popup Menu with Configuration
3. Input Group
4. Input Group
Hi Chuck,
Most of our controls have a hide() method and show() method to affect the controls’ visibility programmatically. Please refer to documentation for more information:
Enterprise Documentation Community Documentation
Note: You must be logged into your account in order to view either editions of the documentation.
-Lisa
Marc Hoffmann
I am using SPARK V3 (Toolkit version “EmeriConVIEWS 2015-04-28-001”) and the Multi Bar Chart and the Simple Bar Chart controls (as well as the Pie Chart control – but the issue seems to be more apparent with the Bar Charts).
I am trying to create a multi-chart dashboard and also make it responsive (for a demo on an iPad). I set the width of the controls to 100%, so that they should respond to the width of the surrounding container (e.g. a Responsive Vertical Section). I then wrapped Responsive Section H’s around them based on how I want the controls to be rearranged at the different browser widths. I then used Responsive Policy controls to set the Horizontal/Vertical displays and width (using percentages) of the Responsive Section H’s into which I placed the controls (which are at 100% width).
However, it does not seem that the chart controls respect or recognize the width of the browser or the responsive sections around them, or the responsive sections are forced to expand to the 100% size of the control (see screen shots that I am trying to attach, but can’t, so please contact me to email to you).
I followed the example “_Test040 (Responsive Section)” in it using “Page 3” from the EmeriConVIEWS toolkit, and my responsive sections and the arrangement seems to be working just fine with the HTML Text control in it (as it is shown in the examples that I am trying to attach, but can’t, so please contact me to email to you). But when I put the chart controls inside of the responsive sections instead of the HTML Text controls, they overflow the browser window.
It may be best to present this issue via WebEx. Please let me know.
Dojo charts (which SPARK Legacy charts are built from) do not have the capability to resize after the initial size has been set. This is a limitation from the control which is inherited from the dojo widgets themselves. For a more responsive behavior for charts, use SPARK v4 charts and controls instead of SPARK Legacy charts.
Marc Hoffmann
Thanks Lisa. I am not sure that I understand your response, as I see a different behavior. When I put the Pie Chart (for example) directly on the coach with no surrounding Responsive Section and set its width at 100%, the Pie Chart control resizes to the width of the browser as I make the browser width larger or smaller. It looks to me that the chart control is responsive, but it does not seem to be responsive when it is inside a Responsive Section. As I mentioned in my initial post, this may require a WebEx to show you the behavior.
Also, I would like to use SPARK V4, but I have this demo currently on BPM 8.5.0.1 and no time to convert it to BPM 8.5.6. Do you have a SPARK V4 toolkit that works with BPM 8.5.0.1?
Hi Marc,
I have sent you an email on resolving this matter.
Best regards,
Salient Process Support – Lisa Leung
Dave Wakeman
I have use cases where I want to use colors other than the ones in the drop down list box (default, success, info, warning, danger) on controls that have a Color configuration option. Is there a way to specify other colors?
Thanks!
– Dave Wakeman
Hi Dave,
One way to specify another color would be to identify the class in the inspector that your want to override and set the color that way. We hope to allow for more customizable colors in future releases.
Lisa L.
