WELCOME TO THE COMMUNITY
find what you are looking for or ask a new question
Home > User Voice > Latest posts

User Voice

MVP
In reply to: Paweł Tołoczko

I agree, I don't use it yeat (I'm in Webcon 2022 ...) , but I see limitation.
I would like to have something like that as native:

[code="https://devrecipes.net/step-progres-bar-with-pure-css/"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Stepper</title>
<style>
.stepper-wrapper {
margin-top: auto;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stepper-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}

.stepper-item::before {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 20px;
left: -50%;
z-index: 2;
}

.stepper-item::after {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 20px;
left: 50%;
z-index: 2;
}

.stepper-item .step-counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: white; /* Zmienione wypełnienie na białe */
margin-bottom: 6px;
border: 2px solid #ccc; /* Dodana szara obwódka */
}

.stepper-item.active .step-counter {
border: 2px solid black; /* Czarna pogrubiona obwódka wokół aktywnego kroku */
}

.stepper-item.completed .step-counter {
background-color: #4bb543;
border: 2px solid #4bb543; /* Dopasowanie obwódki do koloru wypełnienia dla ukończonego kroku */
}

.stepper-item.completed::after {
position: absolute;
content: "";
border-bottom: 2px solid #4bb543;
width: 100%;
top: 20px;
left: 50%;
z-index: 3;
}

.stepper-item:first-child::before {
content: none;
}
.stepper-item:last-child::after {
content: none;
}

.stepper-item.active .step-name {
font-weight: bold; /* Pogrubienie tekstu w aktywnym kroku */
}
</style>
</head>
<body>
<div class="stepper-wrapper">
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D0</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D1</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D2</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D3</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D4</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D5</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D6</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D7</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D8</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">Zakończona</div>
</div>
</div>

<script>
// Tutaj ustawiamy wartość zmiennej krok
var krok = #{3123}#; // przykład, można ją dynamicznie ustawiać

var stepperItems = document.querySelectorAll('.stepper-item');

stepperItems.forEach((item, index) => {
var stepCounter = item.querySelector('.step-counter');
if (index < krok - 1) {
item.classList.add('completed');
stepCounter.textContent = '✓'; // Unicode dla ptaszka
} else if (index === krok - 1) {
item.classList.add('active');
}
});
</script>
</body>
</html>

[/code]

if you wish to test: >>> https://portal.webconbps.com/db/1/app/452/element/6828/form

Hi,

something similar may be available in 2024 R2 if I understood it correctly in the webinar.

I was referring to the new widgets:
https://community.webcon.com/posts/post/widgets/465/3

I would have liked if the widgets could accept pure text like in the attachment (1).
Clicking on it could execute a form rule, for example to show a tab, navigate somewhere else or it could be used as a big button. :)

Best regards,
Daniel

MVP

Hi,

it would really be great to add support for the hyperlink action on the attachment menu.
The only additional thing which would be required is the id of the current attachment.

The hyperlink action supports executing JavaScript and one use case would be to trigger the print dialog without opening the preview.
While this is one there may be other use cases which is the reason why I don't request a "print action".

Best regards,
Daniel

MVP

Hi,

it would really be great to add a custom title or even a description to a new diagnostic session or in the overview.

This would make it easier to identify the session.

It would nice if the user could provide the details but it shouldn't be in the "end and save session" dialog. It happened to me a few times, that the a JS error occurred and the dialog wasn't displayed.

Best regards,
Daniel

MVP

Hi,

I'm currently reducing the execution time of a long path transition in version 2023.1.2.44. In this context I noticed that saving the instance executes "recalculate rows".
In our case this causes another execution of data rows which are only used for displaying information. They are not used in any other combination, even the usage tab is empty.

It would be great, if we could have a checkbox or similar for a data row whether the recalculation can be skipped.
While each execution takes only 30-50 ms this sums up to almost 2 seconds in total.
Ok, this is also due to the fact that the dev system is undersized but this doesn't change the fact, that there is room for improvement. :)

Best regards,
Daniel

I agree, I don't use it yeat (I'm in Webcon 2022 ...) , but I see limitation.
I would like to have something like that as native:

[code="https://devrecipes.net/step-progres-bar-with-pure-css/"]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Stepper</title>
<style>
.stepper-wrapper {
margin-top: auto;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.stepper-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
}

.stepper-item::before {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 20px;
left: -50%;
z-index: 2;
}

.stepper-item::after {
position: absolute;
content: "";
border-bottom: 2px solid #ccc;
width: 100%;
top: 20px;
left: 50%;
z-index: 2;
}

.stepper-item .step-counter {
position: relative;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: white; /* Zmienione wypełnienie na białe */
margin-bottom: 6px;
border: 2px solid #ccc; /* Dodana szara obwódka */
}

.stepper-item.active .step-counter {
border: 2px solid black; /* Czarna pogrubiona obwódka wokół aktywnego kroku */
}

.stepper-item.completed .step-counter {
background-color: #4bb543;
border: 2px solid #4bb543; /* Dopasowanie obwódki do koloru wypełnienia dla ukończonego kroku */
}

.stepper-item.completed::after {
position: absolute;
content: "";
border-bottom: 2px solid #4bb543;
width: 100%;
top: 20px;
left: 50%;
z-index: 3;
}

.stepper-item:first-child::before {
content: none;
}
.stepper-item:last-child::after {
content: none;
}

.stepper-item.active .step-name {
font-weight: bold; /* Pogrubienie tekstu w aktywnym kroku */
}
</style>
</head>
<body>
<div class="stepper-wrapper">
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D0</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D1</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D2</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D3</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D4</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D5</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D6</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D7</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">D8</div>
</div>
<div class="stepper-item">
<div class="step-counter"></div>
<div class="step-name">Zakończona</div>
</div>
</div>

<script>
// Tutaj ustawiamy wartość zmiennej krok
var krok = #{3123}#; // przykład, można ją dynamicznie ustawiać

var stepperItems = document.querySelectorAll('.stepper-item');

stepperItems.forEach((item, index) => {
var stepCounter = item.querySelector('.step-counter');
if (index < krok - 1) {
item.classList.add('completed');
stepCounter.textContent = '✓'; // Unicode dla ptaszka
} else if (index === krok - 1) {
item.classList.add('active');
}
});
</script>
</body>
</html>

[/code]

if you wish to test: >>> https://portal.webconbps.com/db/1/app/452/element/6828/form