How to add a button in toolbar?

Jeroen

created 5 years ago (modified 5 years ago)

[Ticket cloned from T4612: Open / Customize Logic Tab with Shortcuts]

I have tried the API and it worked as the property-grid was enabled to be in the left (or right) container. Like I said I'm trying to isolate the 'Logic' tab of the general survey settings because all my users will use a score function.

What I now did was I added a button in the toolbar that calls similarly to the 'survey settings' button in the toolbar

JavaScript
id: "custom-score",

visible: true,

title: "Score calculation",

action: function () {

creator.selectedElement = creator.survey;

creator.showQuestionEditor(creator.survey);

creator.expandPropertyTab("logic");

}

However this gives me an error
Screen Shot 2020-07-14 at 4.49.09 PM.png

Is this a bug or am I doing something wrong? Also is it possible to open the questionEditor with ONLY the logic tab (rest removed) when I call the action function above, but to have all tabs available when the 'survey settings' button is pressed?

Kind regards,
Jeroen

Screen Sho....09 PM.png

Show previous comments (4)

Serge T 5 years ago

Hello,

Could you please describe in more details - what do you mean under the "Like I said I'm trying to isolate the 'Logic' tab of the general survey settings because all my users will use a score function."?

Here is the live sample how to add a custom button on the creator toolbar - https://surveyjs.io/Examples/Survey-Creator?id=toolbarcustomization&theme=bootstrap
Have you seen it?

Thanks, Serge
SurveyJS Team

Jeroen 5 years ago

Hi Serge,

Thanks again for the quick reply. I'll illustrate my goal with some mockups to make it a bit more clear.

I have added the button as is done in the example you sent:

This button now just opens the survey settings like this:

That is not ideal, because I want the user to be directly confronted with the calculated values. So I would like to remove all the other tabs ("general","logo", "navigation"), but ONLY when the user presses the 'score calculation' button. I want to keep these tabs when the user presses the 'survey settings' button.

Even more so, I would actually prefer to isolate the calculated values tab even further. I made another mock-up of what I actually want to achieve, but I had no idea how to achieve this. Here, a 'score' tab is added (which i have seen examples from), and it shows only the calculated values.

I'm looking forward to your reply, hope you're able to help me!

Kind regards,
Jeroen

button.png current_si...uation.png ideal_situation.png wanted_situation.png

Serge T 5 years ago

Hello,

Thank you for the clarifications. I understand now what do you want to achieve.

Here is the live sample illustrating how to add a new tab to SurveyJS Creator - https://surveyjs.io/Examples/Survey-Creator?id=tabscustomization

SurveyJS Creator is written using KnockoutJs (https://knockoutjs.com/). You can use knockout template or components during implementing of your custom tab.

Thanks, Serge
SurveyJS Team

Jeroen 5 years ago

Hi Serge,

Thanks for your reply again.

I don't think I have the technical know-how to implement this sadly. Are you guys open to create personalized features like this on request in exchange for an hourly/project rate?

Kind regards,
Jeroen

Serge T 5 years ago

Hello Jeroen,

Unfortunately we don't provide custom programming services. You can try to find someone on freelancer sites.

Thanks, Serge
SurveyJS Team

Jeroen 5 years ago

Hi ,

I understand. Then maybe a last question: I think i'm nearly there to create the survey settings screen with only the calculatedValues.

JavaScript
SurveyCreator

.SurveyQuestionEditorDefinition

.definition\["scores"\] = {

'properties' : \[

'calculatedValues'

\]

}

And then call the function with the new button using

JavaScript
creator

.toolbarItems

.push({

id: "custom-score",

visible: true,

title: "Score calculation",

action: function () {

creator.showQuestionEditor("scores");

}

});

However, this does not work as 'scores' does not have a the 'this.obj.getType' function. Now I changed it to:

JavaScript
SurveyCreator

.SurveyQuestionEditorDefinition

.definition\["survey"\] = {

'properties' : \[

'calculatedValues'

\]

}
``` and

```js
creator

.toolbarItems

.push({

id: "custom-score",

visible: true,

title: "Score calculation",

action: function () {

creator.showQuestionEditor("survey");

}

});

Which gives the desired result, but then when I press the 'survey settings' it ofcourse loads the same SurveyQuestionEditorDefinition without any of the other properties. So is it possible to create a new definition with only the calculated Values for this 'Score Calculation' button, but have the original SurveyQuestionEditorDefinition load for the survey settings button?

Serge T 5 years ago

Hello,

Here is the definition of the "survey settings" button:

JavaScript
surveySettings: {
  toolbar: {
    id: "svd-survey-settings",
    icon: "icon-actionsettings",
    visible: this.creator.koIsShowDesigner,
    enabled: true,
    action: () => {
      this.creator.selectedElement = this.creator.survey;
      this.creator.showQuestionEditor(this.creator.survey);
    },
    title: this.creator.getLocString("ed.settings"),
    tooltip: this.creator.getLocString("ed.settingsTooltip"),
  },
},

as you can see the showQuestionEditor method doesn't accept string parameter. I don't understand how it works on your side.

If you provide us with a plunker sample we could take a look. But we'd highly appreciated the minimal sample.

Thanks, Serge
SurveyJS Team

How to add a button in toolbar?

Recently viewed tickets