In my AngularApp i will show the User the current Workflow, by using the REST API.
No Problem so far, usnig:
GET /process-definition/{id}/xml
and the
bpmn.io Viewer.
But it's possible to highlight the current Task or get the special Instance of the Workflow, with highlight the current Task?
Thank you for your help.
1. Get actual the task
The call http://localhost:8080/engine-rest/task/?processInstanceId=<processInstanceId> return a json with the taskDefinitionKey.
https://docs.camunda.org/manual/latest/reference/rest/task/get-query/
2. Style the task
You can add a style class and so highlight a task.
viewer.importXML(diagramXML, function() {
var canvas = viewer.get('canvas');
canvas.addMarker('<<TaskId>>', 'highlight');
});
CSS for the color:
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
fill: green !important; /* color elements as green */
}
The example is from https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors#adding-colors
thanks for helping me out. To make it work as you described, you have to change the ViewEncapsulation to ViewEncapsulation.None in the Angular.ts file.
Related
I need to get rid of only the arrow in the navigation bar in Xamarin forms. I tried in but I didn't get a proper solution. please help me overcome this issue. Thanks in advance.
!! I NEED TO REMOVE PERMANENTLY
solutions that I'm tried up to now :
Shell.SetBackButtonBehavior(this, new BackButtonBehavior
{
IsEnabled=false
});
but still, this didn't help me
There is a easy workaround to solve this.
You could override a Icon with a transparent png file(Follow is a transparent png):
and set enabled be false as follows:
Shell.SetBackButtonBehavior(this, new BackButtonBehavior
{
IconOverride = "transparent.png",
IsEnabled = false
}) ;
Then the effect as follows:
Note: You will see that we also can tap that area, therefore we need to set enabled be false.
Based on this official sample to test that.
You can set this using the Xamarin.Forms.NavigationPage class, from within a view's code behind file. E.g. within a ContentPage's constructor.
NavigationPage.SetHasBackButton(this, false);
I am trying to customize the style of Pull-To-Refresh indicator in NativeScript/Vue app. There seems to be no example code for Vue. I tried to place the following code adapted from Angular into , got errors when running the app.
<RadListView.pullToRefreshStyle>
<PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="blue"/>
</RadListView.pullToRefreshStyle>
Can anybody offer a working example or update the following page?
https://docs.nativescript.org/vuejs/ns-ui/ListView/pull-to-refresh
On a side note, according to doc here:
https://docs.nativescript.org/ns-ui-api-reference/classes/pulltorefreshstyle
Only color and background color can be customized. Is there anyway to get around this change size of indicator?
The only way I can think of is to set both foreground and background of indicator to transparent then use page level activityIndicator.
Just set the attributes on pullToRefreshStyle property
HTML
<RadListView :pullToRefreshStyle="pullToRefreshStyle">
Script
import * as colorModule from "tns-core-modules/color";
data() {
return {
pullToRefreshStyle: {
indicatorColor: new colorModule.Color("red"),
indicatorBackgroundColor: new colorModule.Color("green")
}
};
}
Is it possible to update a Morris chart dynamically? I know setData() will update the data, but I want to update the settings. Namely, the user being able to select if a bar chart is stacked or not.
I have tried:
bChart.stacked = true;
bChart.setData(response);
... because setData() will redraw. I also tried bChart.redraw();. There was no change.
Any ideas welcome.
You were 90% there. You would need to set bChart.options.stacked to true; then do bChart.redraw();.
Therefore, the code for toggling stacked bars is the following (if you are using jQuery):
jQuery(function($) {
$('#stacked').on('change', function() {
bChart.options.stacked = $(this).is(':checked');
bChart.redraw();
});
});
Providing that the checkbox toggling this option has a #stacked ID.
See this working JSFiddle.
I have a dataview list inside a container which is displaying items correctly inside the view. However, whenever I click on an item it isn't getting highlighted.
I've added this to the view containing the DataView list:
onItemTap: function (container, target, index, e) {
var me = this;
me.callParent(arguments); // WARNING: without this call, the row will not become selected
}
I've read that the item won't get selected if I don't have the above. I can see this event being fired ok too. If I debug through the Sencha Touch source code, I can see the CSS class x-item-selected is being added to the DIV wrapping the list item, but there is no highlighting of the row. This works fine on normal lists so what am I missing?
Updated CSS which seems to work.
.x-dataview .x-data-item.x-item-selected
{
border-top-color: #006bb6;
background-image: -webkit-linear-gradient(top, #0398ff, #007ad0 3%, #005c9d);
color: white;
}
By default Sencha Touch Dataview doesn't provide any highlighting. Add a background or something to .x-item-pressed or .x-item-selected class and you will get the desired effect.
How about setting the selectedCls in the config block?
see the following link for detailed information
http://docs.sencha.com/touch/2.2.1/#!/api/Ext.dataview.List-cfg-selectedCls
I'm using the supersized jquery plugin in order to display a fullscreen background slideshow.
Look at this website (it's not my own but I'm using the same structure):
http://mysampleconcept.com/situs4/
As you can see (for example if you give the header some opacity) the images begin at the top of the body.
But I want them to begin below the header (so that the header doesn't cover the top of the image).
If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer.
So that's not the solution I want.
So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.
How can I do this?
Sorry, my English is not the best...
I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981
You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function.
Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:
var portfolioSize = function() {
var headerOffset = 100;
$('#supersized').css({
height: $(window).height() - headerOffset,
top: headerOffset + 'px'
});
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });
I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.
Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).