I have a simple SQLform, where I'm trying to override the labels so they are more meaningful to the user :
form = SQLFORM(db.UserData, submit_button='Report now !', labels =
{'title':'Article Title', 'link':'Link to article',
'htmlcontent':'Content in HTML format', 'textcontent':'Content in text
format', 'source':'Your name', 'imageurl':'Image to the article',
'briefdescription':'Brief article excerpt', 'iscontentavailable':
'Ignore this'})
The labels for htmlContent, imageurl, briefdescription & textcontent are not being replaced.
Any idea what I should be checking or where I might be going wrong ?
You can get a easy name for your fields when defining your table, with labels:
db.define_table('system',
Field('version', label='System Version', length=4),
Field('db', label='System Database', length=10),
Field('modules', label='Modules loaded', length=50)
)
and Using placeholder HTML5 property with a custom form, you can put a tip into the textboxes:
{{=form.custom.begin}}
{{form.custom.widget.title['_placeholder']='Article Title'}}
{{form.custom.widget.link['_placeholder']='Link to article'}}
....
{{=form.custom.end}}
To add a label you can use jquery:
$('#title').val($('#title').val() + 'Article Title');
Related
i have some system codes in documents that i edit in tinymce. that codes should be represented by an interactive placeholder in the WYSIWYG editor.
It is like normal images but the result should be this Code instead (and not parsed to HTML):
[img]id=123&text=bla[/img]
I could not find any information on how to create this interactive placeholder element for custom elements...
any suggestions?
Like this, and set as a toolbar item
editor.ui.registry.addMenuButton('plugins', {
text: 'Plugin',
fetch: function (callback) {
var items = [
{type: 'menuitem', text: 'Image with description', onAction: function() {editor.insertContent('[img]Hier de code[/img]');}},
];
callback(items);
}
});
Is there any solution to use an input value of type Textarea on Forest Admin Smart Action form ? I would like render a field like this :
Documentation said there is only Boolean, Date, Dateonly, Enum, File, Number, String types but use a multiline is a common use case, isn't it ?
Thanks for your help
You can use the widget parameter when configuring your input fields on your Smart Action. Here is an example:
collection('customers', {
actions: [{
name: 'Charge credit card',
fields: [{
field: 'description',
type: 'String',
widget: 'text area', // <-- set the widget text area
}],
}]
I am on my first big ionic project and am stuck. Would someone have an idea how to dynamically hide and show buttons in an ionic popup? I need the buttons to initially be hidden, but then after something happens the buttons should show up. Any idea how to get that done?
Trying to explain further, what is required here is provide angular directives inside of the $ionicPopup buttons. eg
buttons: [{
text: 'Cancel'
}, {
text: '<b ng-disabled="user.length<1">Delete</b>',
type: 'button-crimson'
}]
But ng-disabled="user.length<1" gets trimmed when the pop-up is rendered.
If you're still looking for an answer to this...
I created a variable for my buttons array
var buttons = [{...}, {...}]
Then would assign that to the object in the popup
$ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
**buttons: buttons,**
And then would alter that array
buttons.splice(0, 1, {/*new button*/})
I haven't tested it but it might also work if you wanted to edit a title or class
buttons[0].type = 'newCssClass';
My work-around has been to put the dynamic buttons in the template of the popup rather than the buttons array. It's not ideal but it will work.
eg:
addPopup = $ionicPopup.show({
templateUrl: 'templates/pop-up.html',
title: 'My Popup',
subTitle: 'stuff,
scope: $scope,
buttons: [{
text: 'Cancel',
And then in pop-up.html you can do your usual angular ng-if/ng-hide/ng-disabled/etc stuff like normal. The downside is that those buttons wont show up along the bottom where the ones in the array go, but with some styling work you can make it still look nice.
It should be easy using $scope variables and ng-hide/ng-show
function something_happens(){
$scope.it_happened = true;
}
<button ng-show="it_happened">Qlik Me</button>
The button will only display if $scope.it_happened == true
If I have a form in extjs I can get the data using this
var values = form.getValues();
Unfortunately this only returns fields which are enabled. I also have fields which are disabled. For example I have an ID field which is disabled, because obviously you do not want to modify the ID. So the getValues() method is pretty useless IMO.
There is also getRecord().data which gives me all the values in the form.
form.getRecord().data
Great! But all the data is out of data, and it doesn't reflect modifications done in the form.
I looked at getFieldValues() too, but again this only gives me values of fields that are enabled.
Is there any method out there that will give me exactly all the data in the form as is on the screen? or do I have to write a huge hack to give myself this functionality?
Set the fields to readOnly instead of disabled.
Or do this with a component Query:
var form = formpnl.getForm();
var disableditems = formpnl.query('[disabled=true]');
Ext.each(disableditems, function(item) { item.enable(); });
var values = form.getValues();
Ext.each(disableditems, function(item) { item.disable(); });
console.log(values);
If you want to simulate disabled fields, you can have the following CSS class:
.textFieldDisabled .x-form-text {
background-color: #B1B2B4;
background-image: none;
}
And have this in your view markup:
{
xtype: 'textfield',
fieldLabel: 'User ID',
name: 'UserID',
readOnly: true,
cls: 'textFieldDisabled '
}
getValues() will return the value for this field and it'll look disabled to the user.
I have an XTemplate to display html data as shown below
var headerTmp = new Ext.XTemplate(
'<br><br><br>',
'<div class="contact-display-container" style="height:100px; width:400px">',
'<div style="font-size:12px; left:15px">Hello </div>',
'</div>',
'<br><br><br>'
);
I am referring the data in a dataview
var dataView1 = new Ext.DataView({
autoScroll: false,
tpl: headerTmp,
itemSelector: 'div.contact-display-container'
});
I am trying to display the data in a window
var win = new Ext.Window({
height:700,
width:700,
border:false,
modal:true,
title: 'Review Contact Information',
items:[{
layout : 'vbox',
items : [dataView1]
}],
buttons:[{
text: 'Cancel',
handler:function(){
win.close();
}
}]
});
win.show();
But the data "Hello" is not displayed on the window. Can you please tell me where am I going wrong.
Thanks in advance :)
A dataview should be bound to an instance of a store. Try adding a store config to your dataview.
You are overnesting items in your window. You should add dataView directly as a child item to your window. If you need an extra parent level panel, either change it's layout to something like fit or if you want to keep it as a vbox, add a flex config to the dataview.
Here's a working example:
http://jsfiddle.net/KUqM9/419/