I am trying to add a dialog to my app, and while I have no issues defining the form I want the way I want, the Save and Cancel buttons simply aren't showing up and I don't know why. I'm new to Magnolia and custom apps, so sure I'm missing something, but I've gone through the sections in the documentation I can find, but from everything I've seen, this should work.
detailFeatured:
subAppClass: info.magnolia.ui.contentapp.detail.DetailSubApp
class: info.magnolia.ui.contentapp.detail.DetailSubAppDescriptor
actions:
commit:
class: info.magnolia.ui.form.action.SaveFormActionDefinition
label: "Save"
cancel:
class: info.magnolia.ui.form.action.CancelFormActionDefinition
label: "Cancel"
editor:
wide: true
actions:
- name: commit
- name: cancel
form:
tabs:
- name: featured
label: "Featured Slideshows"
fields:
- name: ogLabel
label: ""
class: info.magnolia.ui.form.field.definition.StaticFieldDefinition
value: "<strong>Hero Slideshow</strong>"
- name: hero
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
required: true
label: Slideshow URI
- name: ogLabel
label: ""
class: info.magnolia.ui.form.field.definition.StaticFieldDefinition
value: ""
- name: ogLabel
label: ""
class: info.magnolia.ui.form.field.definition.StaticFieldDefinition
value: "<strong>Slideshow Carousel</strong>"
- name: carousel
class: info.magnolia.ui.form.field.definition.MultiValueFieldDefinition
required: true
label: Slideshow URIs
field:
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
label: URI
nodeType:
icon: icon-files
name: mgnl:featured
contentConnector:
workspace: featured
Looks alright. Few things to do when you run across something like that:
- Check in the file that you don't have some special invisible chars in the definition instead of just spaces.
- Also make sure you have magnolia.develop=true and observe messages in the log when saving definition file. Hopefully that will tell you something useful.
- and last, best of all, go and install Magnolia 5.5 (beta available at time of writing, final should be out as of Nov 15th 2016) and once installed, look at the app via new Definitions App. It should show you all the errors it found in your definition.
Related
I am writing my own plugin for Grafana and I want to display multiple lines (i.e. rows) for addTextInput so that I can write paragraphs of text in the textbox (i.e. like grafana's own Text Plugin's Content Input). By default, addTextInput only has a single row. This is something that should be pretty simple but somehow I can't find the feature in the documentation. Does anyone knows how to do it?
In module.ts:
return builder
.addTextInput({
path: 'myText',
name: 'This is supposed to be a multiple line input',
defaultValue: '',
})
});
I finally found the answer after hours of googling and looking at the source code of others. This is the way to enable multiple rows on the textinput:
return builder
.addTextInput({
path: 'myText',
name: 'This is supposed to be a multiple line input',
defaultValue: '',
settings: {
useTextarea:true,
rows: 5,
}
})
});
I'm not sure why isn't this documented in the documentation.
Having this select control:
new Select("id", {
items: {
path: "/cards",
template: new ListItem({
key: "{Kunnr}",
text: "{Descrip}"
}),
},
});
I need it be able to get the selected key of it, but not in the change event. I need it from outside (another function).
I have tried using the ID but I just get undefined as result.
There is a some information missing from your question, mostly around how oSelectMarca is added to your view. This makes a difference in how it's made available in your app. There are two places to get something by Id:
this.getView().byId('id');
sap.ui.getCore().byId('id');
You'll have to check which one it is... Another option is to add that model to your view instead of oSelectMarca in which case your view and your select can share data. But once again that depends on how you add the select to the screen.
Depending on where You need to use it You can do:
this.oSelectMarca = new sap.m.Select('id',{});
this.oSelectMarca.setModel(myModel);
or If You'll be using it in say another controller try:
sap.ui.getCore().oSelectMarca = new sap.m.Select('id',{});
sap.ui.getCore().oSelectMarca.setModel(myModel);
Try with two-way data binding in selectedKey which helps to keep the MV* pattern.
new Select({
selectedKey: "{/selectedCard}" // <-- It's TwoWay
items: {
path: "/cards",
template: new ListItem({
key: "{Kunnr}",
text: "{Descrip}"
}),
},
});
I'm assuming that the default model is accessible across the application. Hence, as long as you can access that model, you can get the selected key by myModel.getProperty("/selectedCard");
I solved it by accesing to the properties from outside using the sap core:
var myvar = sap.ui.getCore().getModel("marcas");
var selectedKey= myvar.getProperty('/cards/Kunnr');
I'm building a angular 2 (2.0.0-rc.4) application with the new form API (2.0.2) and i've got a problem when i'm trying to update checkbox form controls with updateValue().
This is what i've done:
I've built a dynamic form with the new form API (based on the section in the cookbook: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html). I've extended the form class to also handle checkboxes:
export class FormControlCheckbox extends FormBase <string> {
controlType: string;
options: { key: string, value: string, checked: boolean } [] = [];
checked: boolean = false;
constructor(options: {} = {}) {
super( options );
this.controlType = "checkbox";
this.options = options['options'] || [];
this.checked = this.options[0].checked;
}
}
This is what it looks like when it's created:
new FormControlCheckbox({
type: "checkbox",
label: 'A label',
name: "a-name",
value: "",
description: "a description",
options: [
{
label: 'A label',
name: "a-name",
checked: false
}
],
})
When the application are loaded the form controls are created and grouped together, everything works fine and the form get submitted as intended. I only had to do a workaround to make the checkbox update on change and the markup are as followed:
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = $event.target.checked">
I've also tried this markup (it also works fine):
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = check.checked" #check>
This is where my problem occurs
I'm adding a feature that updates the control values when the form just have been loaded (the user should be able to revisit the page and update previous values). The code below update all the control values.
for (var key in new_values) {
//the form control keys are the same as the key in the list of new_values
this.form.controls[key].updateValue(new_values[key]); //works for text, select and option
this.form.controls[key].updateValueAndValidity(); //not sure if needed?
this.form.controls[key].markAsDirty();
}
Text, option and select inputs gets updated but the checkboxes are unchanged. No errors or warnings. I've searched a lot for similar problems but have not found a similar problem or a solution.
Am I missing something obvious? Or have somebody had the same problem and want to share their solution?
Thanks!
Solved the problem by changing the values before creating the control-groups (before this it's possible to change the values (ex. x.value). It solved my problem but do not solve the fact that dynamically changes to checkbox form controls are not reflected in the DOM element.
I tried to get the model of the control situated on another view and apply this model to the control on current view.
To do so, I've put the following code into onBeforeRendering() function of the controller:
var oModel = sap.ui.getCore().byId('<id of the control in another view>').getModel('<modelName here>');
sap.ui.getCore().byId('<id of the control in the current view>').setModel(oModel, "<modelName here>");
The problem is that this construction works well on PC and tablet (android) (the control - sap.m.select - is populated with items), but this does not work on smartphone (android) (sap.m.select control is empty).
How do I solve this?
As #mjd suggested in the comment, I've used global model:
sap.ui.getCore().setModel(<shared model data>, "<modelName>");
and then just used the model by its name.
For example:
in page1.controller:
sap.ui.getCore().setModel(data, "selection");
and then in page2.view (the same construction is used in page1.view):
var oSelection = new sap.m.Select({
id: 'selectionID',
items: {
path: "selection>/rootElementName",
template: new sap.ui.core.Item({
text: "{selection>elementName}"
})
},
});
I want to make a custom content type with the possibility to edit a download file. In my NodeTypes.yaml I have:
'Vendor.Prefix:MyContentType':
superTypes: ['TYPO3.Neos:Content']
ui:
label: My Content Type
icon: 'icon-file-text'
inspector:
groups:
'props':
label: Properties
properties:
'title':
type: string
defaultValue: 'Example Title'
ui:
label: 'Title'
inlineEditable: TRUE
Now - how do I create a file upload field? I only found working examples for image fields:
'chapterImage':
type: 'TYPO3\Media\Domain\Model\ImageVariant'
ui:
label: 'Chapter image'
reloadIfChanged: TRUE
inspector:
group: 'document'
In the same folder, there are classes for file uploads, but this doesn't work:
'grundriss':
type: 'TYPO3\Media\Domain\Model\Document'
ui:
label: 'Grundriss'
editor: 'TYPO3.Neos/Inspector/Editors/FileUpload'
inspector:
group: 'props'
Neither with nor without the 'editor' line. It leads to the JavaScript error:
Uncaught TypeError: Cannot read property 'editor' of undefined
Uncaught Error: You cannot modify child views while in the inBuffer state
And to an empty property inspector.
Has anyone a tip for me?
True enough this was not working. We have merged a way to link to all kinds of asset files in the current 1.1 beta release. Maybe check that.