We have a custom action that follows some custom workflow logic behind the scenes and want to add a layout to the data captured to the settings. I was able to add a checkbox to enable the layout (its an optional thing) associated with the custom action but I cant seem to find how to add a layout editor to our form?
var f = shapeFactory.Form(
Id: "ActionForm",
_Outcomes: shapeFactory.TextBox(Id: "action-text-box", Name: "Action", Title: T("Action")),
_HasLayout: shapeFactory.CheckBox(Id: "HasLayout", Name: "HasLayout", Title: T("Uses Layout"), Value: "true"),
//_Layout: shapeFactory.Parts_Layout_Edit(Id: "Layout", Name: "Layout", Title: T("Layout"))
);
This is where I am at at the moment (the last line is commented because the part name is incorrect), but I feel I am missing some core concept for adding the layout editor... Any help would be appreciated!
I figured this out after much experimentation.
Add to the form description
_Form: shapeFactory.EditorTemplate(Id: "Form", Name: "Form", Title: T("From"), TemplateName: "Parts.Layout", Prefix: "LayoutPart",
Model: new LayoutPartViewModel {
LayoutEditor = layoutEditorFactory.Create("", Guid.NewGuid().ToString())
})
and then you need to add a script to the form page in order to reload the layout editor with the bound data.
$(document).ready(function(){
var layoutEditorData = JSON.parse($("[name$='.LayoutEditor.Data']").val());
window.layoutEditor = new LayoutEditor.Editor(window.layoutEditor.config, layoutEditorData);
});
Related
I am trying to create an app single page by using Getx.
When the user changes the URL, the page will change some widgets but Getx still moves to the same page(Observed from the movement when turning pages).
Now, I am using:
getPages: [
GetPage(
name: "Page 1",
page: () {
globals.page= "Page 1";
return Home();
}),
GetPage(
name: "Page 2",
page: () {
globals.page= "Page 2";
return Home();
}),
]
How to solve it?
I am looking like:
getPages: [
GetPage(
name: ["Page 1","Page 2"],
page: () => Home(),
refreshPageWidget: false, //Don't return widget from page:
onSamePage: (String url) { //Do when routing to original page.
if(url == "Page 1"){
globals.page= "Page 1";
}else{
globals.page= "Page 2";
}
}),
]
Can Getx(any package) do this?
It is possible but not complete.
You can change the URL by using
window.history.pushState(null, 'url name', URL);
changePageWidget();
setState((){});
But This will make this app has only one route.
So it can't go back or forward by using the arrow navigation button in the web browser (Although at present this flutter web is not good enough for this.) and you can't use Navigation to manage this page. You must create the function to manage this page.
The big issue with this method is You can't use stateFullWidget
because the stateFullWidget will reset itself when the page widget was changed. So, you need to use state management.
In summary, you can do that as mentioned above but you can't use the arrow navigation button in the web browsers, and you can't use some functions that the flutter makes easy to use.
For me, I am using these steps for some pages that have a tab bar(only change URL).
I have movable columns, hideable columns etc in my tabulator application. I would like a button to reset the view but I don't see anything that clears the persistence data in the documentation.
I'm very new to Tabulator but I have just recently done something similar. I wanted to reset col widths and positions.
The general idea is: In my grid setup code I have a function called getGridColumns. This gets the initial column definitions which then get added into the grid options that get passed to the new Tabulator(...) call.
ie something like
const options = {
data: this.data,
columns: getGridColumns(),
// ...other options
};
this.table = new Tabulator("#myGridId", options);
I have a header menu on one of the columns:
function getGridColumns() {
return [
{
title: "",
field: "dummy",
width: 80,
resizable: false,
// etc...
headerMenu: specialTableFuncsMenu,
},
{ title: "Col 1", field: "myField", /* etc */ },
];
}
and the header menu has a call to set the column layout using the getGridColumns function as parameter.
function specialTableFuncsMenu(e, col) {
const menu = [
{
label: "Reset columns",
action: col.getTable().setColumnLayout(getGridColumns()),
},
];
return menu;
}
The original is in Typescript so this might not be entirely accurate Javascript. And I have wrapped the action call in a setTimeout() just to prevent a console error when the grid tries to close the popup after it has redrawn itself.
I did, originally, clear the persistent storage too but removed the code as I don't think it's really needed. Something like:
localStorage.removeItem('tabulator-myGridId-columns');
Which assumes we're using localStorage and ignores the cookie option.
This all does an acceptable job of resetting my column layout. You could add in calls to clear filters etc as required.
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
I use the SAPUI5 Framework.
Within a page there are two possibilities for action, to make a new patient and to edit a patient. The new and edit, control/view pages are compiled into one, one control and one view for both new and edit.
Since they both are within one-page control/view, whenever I try to make a new patient or to edit a patient I get the same title for both of these Options.
My approach.
Get the URL of the page -> New or Edit. -> Split till I get, if it's new or edit.
If its new, change the title to New if edit that the title to Edit.
var completurl = window.location.href;
var split = completurl.split("/");
if(split[7] == 'new'){
this.byId("semantic:DetailPageID").setTitle("New");
}
else {
this.byId("semantic:DetailPageID").setTitle("Edit");
}
Expected: To change the title of the header.
Actuality: Doesn't do shit
First you need the different buttons in your main.view.xml.
main.view.xml:
<Button press="onPressNew" text="New"/>
<Button press="onPressEdit" text="Edit"/>
Now you could use a local model for saving the action
editNew.controller.js:
onPressEdit: function () {
this.myLocalModel.setProperty("/Action", "Edit");
//Navigate to editNew.view.xml
},
onPressNew: function () {
this.myLocalModel.setProperty("/Action", "New");
//Navigate to editNew.view.xml
}
In your editNew.view.xml, you could use expression binding
editNew.view.xml:
<Page id="pageEditNew" title="{= ${localModel>/Action} === 'Edit' ? ${i18n>title_edit} : ${i18n>title_new}}">
I'm using Kentico 9 and I'd like to be able to use different CK Editor style sets on different pages. I have added a style set to the styles.js file as follows.
CKEDITOR.stylesSet.add("mystyles", [{ name: "testone", element: "p" }]);
Then in the page I've added some JS as per the CK Editor web site.
if (CKEDITOR.currentInstance) {
CKEDITOR.currentInstance.config.stylesSet = "mystyles";
}
When I load the page containing the CK Editor, the style drop down contains the default style set, not the custom one I defined.
Does anyone know how to achieve this?
If I remember it right you need to define your new toolbarset in config.js (CMSAdminControls/CKEditor/config.js) dropdown.
Something like:
config.toolbar_Basic = [
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'InsertLink', 'Unlink']
];
The other thing - you need to add new option to this dropdown in Webparts application > EditableText webpart> Properties > HTMLAreaToolbar > DataSource
Here's the documentation you need to read.
The dropdown styles are defined in CMS\CMSAdminControls\CKeditor\styles.js, such as:
{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
You define the name of the style (the name appears in the dropdown), and then the element and style(s) that should be applied.
After editing the file, make sure you clear your browser cache.
As most Kentico admin interface pages are nested and iframe'd, the caching is pretty agressive, and your styles might not appear until cache is cleared.
Well, it's just javascript after all, so you can simply check the url in some if statement or in some switch-case and then apply styles you need. Do you need some code example? You should be able to find many of them on the internet :)
Here is how I solved my issue. I added the following to styles.js:
CKEDITOR.stylesSet.add("my-styles", [
{ name: "Paragraph", element: "p" },
{ name: "Heading 1", element: "h1" }
]);
Then, in the master page for the area of my site that needs to use the "my-styles" style set, I added:
<script>window.ckstyleset = "my-styles"</script>
Finally, in config.js I added:
var styleset = window.ckstyleset ? window.ckstyleset : "default";
config.stylesSet = styleset;
Using this approach I was able to customise the styles listed in the drop down depending on what master page was is use.