Can you add separators to dropdown menus in activeadmin - activeadmin

Is there a way to add separators to a dropdown menu in activeadmin?
For example, if I wanted a separator between the first and second items, how can I do that?
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 15
end
I checked the documentation but don't seem to see anything for that.

As of writing this comment, ActiveAdmin is at version 1.2.1 and based on its code, it isn't possible to add separators/dividers in a dropdown menu. :(
I just checked on the Github repo and they have no opened issue nor pull request matching the "separator" or "divider" keywords.
Maybe the first step would be to open an issue describing what and how to implement it.

Nothing is preventing us from adding a divider manually:
menu.add label: 'Tasks', priority: 10 do |tasks|
tasks.add label: 'Add News Item',
url: proc { new_feed_path },
if: proc { authorized? :create, Feed },
priority: 14
tasks.add label: "<hr>".html_safe,
url: "javascript:void(0)",
priority: 15
tasks.add label: 'Add Calendar Event',
url: proc { new_event_path },
if: proc { authorized? :create, Event },
priority: 16
end
a url attribute is required so using javascript:void(0) is an option here as # will not render the label. This question discusses javascript:void(0)

Related

How do I format [future, non-current] dates in Eleventy + Nunjucks?

I'm building a site with a CMS (Netlify) for a local band, and they have future gig dates they will put on the site. So far the dates show up as very long non-formatted strings that include the time and time zone. I'm trying to figure out how to format the dates to be simpler (day, date, time for example).
I've tried plugins like nunjucks-date but I'm a little confused about how to use a plugin (and filters) in this case.
My repo: https://github.com/mollycarroll/serapis-eleventy-2
Example gig entry:
---
layout: gig
venue: Cedar Lake Cellars
date: 2022-05-28
time: 6pm
city: Wright City, MO
---
Gig template:
<h2>{{ venue }}</h2>
<h4>{{ city }} {{ date }} {{ time }}</h4>
config.yml for the CMS:
- name: 'gigs'
label: 'Shows'
folder: 'src/gigs'
create: true
slug: '{{month}}-{{day}}-{{venue}}'
fields:
- { label: 'Layout', name: 'layout', widget: 'hidden', default: '_includes/gig.njk' }
- { label: 'Date', name: 'date', widget: 'date', default: '' }
- { label: 'Time', name: 'time', widget: 'string', default: '' }
- { label: 'Venue', name: 'venue', widget: 'string', default: '' }
- { label: 'City', name: 'city', widget: 'string', default: '' }
Thanks for any help.
First, you should create a filter, let's say src/filters/date.js with the following content:
const { DateTime } = require("luxon");
// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL d, y unless an
// alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens
module.exports = (dateObj, format = 'LLLL d, y') => {
return DateTime.fromISO(dateObj, { zone: "Europe/Amsterdam", locale: "en" }).toFormat(format);
};
Make sure you check Luxon documentation for details. Then add the filter in .eleventy.js:
module.exports = function(eleventyConfig) {
...
eleventyConfig.addFilter("date", require("./src/filters/date.js"));
...
};
Now you can use it in Nunjacks with a default value {{ date }}, in this example 'LLLL d, y', or any value you need at a certain position on your website {{ date | date('dd. LLLL yyyy.') }}. This can be very useful if you need at some point just month and year or just day and month.
You can even create multiple language filters, like dateEn.js and dateDe.js, and format each to its own language if you have a multilingual site.
Hope this helps.
EDIT: In order for this filter to work the dateObj should be in ISO 8601 format.

How to access value of switchable fieldType dialog in magnolia 6.2 using .ftl languange

FYI I'm new in magnolia,
I'm trying to use switchable type field in dialog, here is my YAML look like :
form:
label: Confirmation Pop Up
tabs:
- name: Menu
label: Menu
fields:
- name: linkUrl
fieldType: switchable
label: Link Button Reject
class: info.magnolia.ui.field.ConfiguredSwitchableFieldDefinition
transformerClass: info.magnolia.ui.form.field.transformer.composite.SwitchableTransformer
options:
- name: intLink
label: Internal URL
selected: true
value: intLink
- name: extLink
label: External URL
value: extLink
fields:
- name: intLink
class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
targetWorkspace: website
fieldType: link
appName: pages
label: Link Internal
description: Choose a page to link .
identifierToPathConverter:
class: info.magnolia.dam.app.ui.field.definition.DamUploadFieldDefinition
- name: extLink
label: Link External
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
actions:
commit:
class: info.magnolia.ui.admincentral.dialog.action.SaveDialogActionDefinition
cancel:
class: info.magnolia.ui.admincentral.dialog.action.CancelDialogActionDefinition
I can get this value
options:
- name: intLink
label: Internal URL
selected: true
value: intLink
- name: extLink
label: External URL
value: extLink
by calling ${content.linkUrl} which will show "intLink" or "extLink",
so, how do I get value of this :
fields:
- name: intLink
class: info.magnolia.ui.form.field.definition.LinkFieldDefinition
targetWorkspace: website
fieldType: link
appName: pages
label: Link Internal
description: Choose a page to link .
identifierToPathConverter:
class: info.magnolia.dam.app.ui.field.definition.DamUploadFieldDefinition
- name: extLink
label: Link External
class: info.magnolia.ui.form.field.definition.TextFieldDefinition
Could anyone help me on this please?
If you look in the JCR for that node you'll probably see an item called linkUrlintLink and linkUrlextLink This is because the values aren't getting transformed and by default, the switchable field will concatenate the names. You should be able to access them through ${content.linkUrlintLink and ${content.linkUrlextLink. You also can use the DelegatingCompositeFieldTransformer class to strip the prepended name of the field names.

Best strategy for Angular Front-End Form Building by Users [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Good day, whoever reads this, thanks for taking the time to possibly assist!
Back in the day, I used to work a lot with Wordpress (PHP) and there was this plugin we used to gather metadata: Advanced Custom Fields (advancedcustomfields . com). What made it cool was that you could visually set up groups of questions (a form if you will), by selecting the types of questions and configure their setup and style (input with label in inside or outside, or, table with rows and columns specifying each key alongside which the answer would be saved against in the database).
I'm looking to build the exact same thing in Angular 8+, allowing my client to choose whatever type of field (input) they want and group them together. How do you suggest I go about this:
1) build custom components like: text input/area, radio, table, map, image, file upload, checkboxes, date/time pickers, select boxes, groups etc (each carrying conditional rules to show or not depending on some other component)... and then let the user choose the relevant parameters for each component and send them to the component ngOnInit() with #Input or a service?
2) does a similar package already exist for me to leverage such functionality quicker?
Appreciate the advice and input :)
Rgds,
Wzz
Have a look at ngx-formly. Another option is ng-dynamic-forms. These libraries have dynamically configurable input elements section.
ngx-formly code sample from their demo below:
app.component.ts
import { Component } from '#angular/core';
import {FormGroup} from '#angular/forms';
import {FormlyFieldConfig} from '#ngx-formly/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
})
export class AppComponent {
form = new FormGroup({});
model = {};
fields: FormlyFieldConfig[] = [
{
key: 'input',
type: 'input',
templateOptions: {
label: 'Input',
placeholder: 'Input placeholder',
required: true,
}
},
{
key: 'textarea',
type: 'textarea',
templateOptions: {
label: 'Textarea',
placeholder: 'Textarea placeholder',
required: true,
}
},
{
key: 'checkbox',
type: 'checkbox',
templateOptions: {
label: 'Checkbox',
}
},
{
key: 'select',
type: 'select',
templateOptions: {
label: 'Select',
placeholder: 'Select placeholder',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
{ label: 'Option 3', value: '3' },
]
}
},
{
key: 'radio',
type: 'radio',
templateOptions: {
label: 'Radio',
required: true,
options: [
{ label: 'Option 1', value: '1' },
{ label: 'Option 2', value: '2' },
]
}
}
];
onSubmit() {
if (this.form.valid) {
alert(JSON.stringify(this.model, null, 2));
}
}
}
app.component.html
<div class="header">
<img src="https://raw.githubusercontent.com/ngx-formly/ngx-formly/v5/logo.svg?sanitize=true" alt="" width="72" height="72">
<h4 class="mat-h2">Angular Formly Material</h4>
</div>
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<formly-form
[form]="form"
[model]="model"
[fields]="fields">
</formly-form>
<button type="submit" color="primary" mat-raised-button>
Submit
</button>
<button type="reset" color="warn" mat-raised-button>
Reset
</button>
</form>

How to remove default links on navigation bar and change their order

As title,
I want to remove the default links assets, comments
and change the remaining links order, how to do it ? thanks
In initializers/active_admin.rb
config.comments_menu = false
That will remove comments from the menu.
If you want to customize the menu further, remove assets, or keep comments and move them to a dropdown you can build a menu. Just omit any label that you'd like hidden from the menu.
config.comments_menu = false
#....
config.namespace :admin do |admin|
admin.build_menu do |menu|
menu.add label: 'Dashboard', priority: 0
menu.add label: 'Revenue', priority: 3
menu.add label: 'Costs', priority: 4
menu.add label: 'Categories', priority: 5
menu.add label: 'Users & Comments', priority: 6
menu.add label: 'Comments', parent: 'Users & Comments', url: "/admin/comments"
end
end

Why does my gridPanel in a tabPanel show the wrong height?

In the attached image, the grid does not show properly. The grid is inside a tabpanel. The layout of the tab is = 'fit'.
What setting error is causing the behavior?
EDIT:
Here is the class definition for the tabpanel: Our tab is the one called 'External ID'
/*
* File: SomeTabPanel.ui.js
* Date: Mon May 02 2011 18:08:34 GMT-0400 (Eastern Daylight Time)
*
* This file was generated by Ext Designer version xds-1.0.3.2.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/
SomeTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
forceLayout: true,
border: false,
enableTabScroll: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
title: 'General',
layout: 'table',
tpl: '',
ref: 'GeneralTab',
layoutConfig: {
columns: 2
},
items: [{
xtype: 'form',
title: 'Corporate',
height: 500,
width: 500,
animCollapse: false,
items: [{
xtype: 'box',
ref: '../../coporateBox'
}]
}]
},{
xtype: 'panel',
title: 'External ID',
layout: 'fit',
ref: 'ExtIdTab',
id: ''
}];
SomeTabPanelUi.superclass.initComponent.call(this);
}
});
Looks like you need to set a height for the grid somehow. Either a manual height declaration, autoHeight: true, or inherited height from a parent container.
Does the parent tabPanel have a height declared/inherited?
Setting layout: 'fit' is a good start for the containing tab, but without some code or a test case, I can't be more helpful.
It should work as described, so you must have something wrong in your code. Post your layout code if you want more help.

Resources