How to add a new template to Typo3 "Layouts" drop-down list - templates

I have a Typo3 installation with 3 existing layout options. These are all declared in the page.ts file like so:
#normal layout:
[globalVar=TSFE:page|layout=0]
page.10.template.file = fileadmin/template/classic-page.html
page.includeCSS.screen = fileadmin/template/css/style.css
page.includeCSS.screen.media = screen
[global]
And they are all in this list further down the page.ts file, like so:
TCEFORM.pages {
layout.altLabels.0 = Normal
layout.altLabels.1 = Startpage
layout.altLabels.2 = Landing page
}
All of these layout options are displayed in the CMS on the "Edit Page (X)" > Appearance page, in a drop-down list of possible layout options. Handy!
Now I have a shiny new template that I want to add as an option. I can apply it to a specific page id (say, page id #563) by adding this code to the page.ts:
[globalVar = TSFE:id=563]
page.10.template.file = fileadmin/template/shinynewtemplate.html
[GLOBAL]
But I can't seem to add it as a new layout option in the drop-down menu. I have tried this:
#shiny new layout:
[globalVar=TSFE:page|layout=3]
page.10.template.file = fileadmin/template/shinynewtemplate.html
page.includeCSS.screen = fileadmin/template/css/style.css
page.includeCSS.screen.media = screen
[global]
TCEFORM.pages {
layout.altLabels.0 = Normal
layout.altLabels.1 = Startpage
layout.altLabels.2 = Landing page
layout.altLabels.3 = Shiny new page
}
But no banana. It doesn't show up in the Appearance layout list, so I can't apply it to a page.
What am I missing? Is there somewhere else that I need to declare this template file so that it will show up as an option in the drop-down list?

An alternative label does not help, if there is no item which will use your label.
You need to add the new item (Page TS Config!):
TCEFORM.pages {
layout.addItems.3 = Shiny new page
}
See TSconfig

Related

New Buttons in Interactive Grid toolbar

I need to add a new button to existing IG toolbar, which will set a specific value in the table column and then save the record.
Is there any way to create new buttons/change the behavior of existing Interactive Grid toolbar buttons?
I see you are using APEX 5.1. Yes, you can customise toolbar buttons in an interactive grid. For example, you can modify the look and feel of the Save and Add Row buttons and also add a Delete button. Select your interactive grid region and in the property editor, enter a value for Advanced > Static ID. Select Attributes > Advanced > JavaScript Initialization Code and input the following:
function(config) {
let $ = apex.jQuery,
toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
toolbarGroup = toolbarData.toolbarFind("actions3");
addrowAction = toolbarData.toolbarFind("selection-add-row"),
saveAction = toolbarData.toolbarFind("save"); // Save button
// adding a "Delete" button
toolbarGroup.controls.push({type: "BUTTON",
action: "selection-delete",
icon: "icon-ig-delete",
iconBeforeLabel: true,
hot: true
});
// Modifying the buttons
addrowAction.icon = "icon-ig-add-row";
addrowAction.iconBeforeLabel = true;
addrowAction.hot = true;
saveAction.iconBeforeLabel = true;
saveAction.icon ="icon-ig-save-as";
saveAction.hot = true;
//storing the config
config.toolbarData = toolbarData;
return config;
}
Now run the page to see the customisation.
Here's a nice video that shows how to customise IG toolbar.
https://www.youtube.com/watch?v=_PBdBAfPBfQ

Using different page templates in TYPO3

I'm looking for some help about using different templates for each page. I'm using everything is on the TYPO3 video tutorial (linked below) but isn't explain there how to do what I need (which code must be write and where).
Site Package tutorial part 1
Site Package tutorial part 2
Site Package tutorial part 3
I suggest to start with the site package builder: https://sitepackagebuilder.com/ based on Bootstrap package which will a) bring you already helpful templates and b) shows you how to make your own ones (Example.html / Configuration/TsConfig/Page/Mod/Weblayout/BackendLayout.tsconfig).
Some helpful references: https://docs.typo3.org/typo3cms/SitePackageTutorial/FluidTemplates/Index.html
Connecting Fluid templates to Backend Layouts
So you have a special template for the about page and want to use it in TYPO3. You'll have to create a new Backend Layout for this template.
The Backend Layout could be configured in Page TSconfig like that:
mod.web_layout.BackendLayouts {
about {
title = About page
config {
backend_layout {
colCount = 1
rowCount = 1
rows {
1 {
columns {
1 {
name = main column
colPos = 0
}
}
}
}
}
}
icon = EXT:your_sitepackage/Resources/Public/Images/BackendLayouts/About.svg
}
}
In the next step, you'll have to connect your new Backend Layout with your template. This is done in TypoScript setup:
page = PAGE
page {
10 = FLUIDTEMPLATE
10 {
file.stdWrap.cObject = CASE
file.stdWrap.cObject {
// select a layout template depending on the page's BackendLayout:
key.data = pagelayout
// Important! If you set BackendLayouts through TSconfig, you MUST use the prefix 'pagets__':
pagets__1_column = TEXT
pagets__1_column.value = EXT:your_sitepackage/Resources/Private/Templates/1Column.html
pagets__about = TEXT
pagets__about.value = EXT:your_sitepackage/Resources/Private/Templates/About.html
default = TEXT
default.value = EXT:your_sitepackage/Resources/Private/Templates/1Column.html
}
layoutRootPaths {
10 = EXT:your_sitepackage/Resources/Private/Layouts/
}
partialRootPaths {
10 = EXT:your_sitepackage/Resources/Private/Partials/
}
variables {
}
}
}
Official video tutorial
See also the YouTube video about this topic: How to implement frontend layouts in TYPO3 using backend layouts
Finally, assign your new Backend Layout to single pages in TYPO3 backend
This is done in the page properties:
Open the page properties of a page in the TYPO3 Backend.
In the tab 'Appearance', you will find two options to assign Backend Layouts:
'Backend Layout (this page only)'
'Backend Layout (subpages of this page)'
These are pretty much self-explanatory:
The first option sets the desired Backend Layout only for this single page.
The second option will assign the Backend Layout for all sub pages of the current page. You can override this Backend Layout again: open the page properties of the sub page where you want a different layout and assign a new one.
On this website you can find an even more detailed explanation with screenshots (taken from the Backend of TYPO3 6.2).

django summernote create custom buttons

I'd like to add a custom button similar to this one:
$('#makeSnote').click(function(event) {
var highlight = window.getSelection(),
spn = document.createElement('span'),
range = highlight.getRangeAt(0)
spn.innerHTML = highlight;
spn.className = 'snote';
spn.style.color = 'blue';
range.deleteContents();
range.insertNode(spn);
});
JS Fiddle
http://jsfiddle.net/ypweuw1L/
I'm not sure how would I go about adding this into my Django app? I don't see anything in the django-summernote docs.
I don't know about django-summernote well. But you can create custom button and use it on toolbar with options.
for more details...
http://summernote.org/deep-dive/#custom-button

Sitecore: multilist during deployment

How to enable the multilist to be control in content editor?
for example I have a list of item, item1 to item10. In the standard template value, I defined item1,2,3. After I have deploy the solution, how am I going to enable users in content editor mode or page editor mode to select item7,8,9 and 10?
And also, after I tested/rendered the multilist, only RAW VALUES are being rendered, is there any possible to render the item name such as item1? Do I need to customize the multilist?
The multilist control should be directly visible to the user in the Content Editor, you do not need to do anything else. Since you defined some items in standard values then those will be "pre-selected" when that item is first created. The user can then add the additional items as required.
To allow users to select values from the Page Editor you can Use Sitecore EditFrame in PageEdit
The reason the item is being rendered as the raw value is because you need to get the item and then iterate over the target id's. There is an example of this here here
//Get a multilist field from the current item
Sitecore.Data.Fields.MultilistField multilistField = Sitecore.Context.Item.Fields["myMultilistField"];
if (multilistField != null)
{
//Iterate over all the selected items by using the property TargetIDs
foreach (ID id in multilistField.TargetIDs)
{
Item targetItem = Sitecore.Context.Database.Items[id];
litItemTitle = targetItem.DisplayName;
// Do something with the target items
// ...
}
}
You can use the following instead for the datasource of a repeater
Sitecore.Data.Fields.MultilistField multilistField = Sitecore.Context.Item.Fields["myMultilistField"];
Sitecore.Data.Items.Item[] items = multilistField.GetItems();

ListView using SimpleCursorAdapter not clickable

I'm using a SimpleCursorAdapter with a custom layout file. When I try to populate this layout in the ListView, the items are not clickable. I put android attribute of the fields in the layout file for clickable to try fix that, but it's not working.
I think that attribute clickable is "true" for default. When I use the default layout file from "android.R.layout.simple_list_item_1" the items on list goes clickable. I think that a simple change in the layout file shouldn't interfere with the clickable attribute, but it's what I'm seeing.
This code doesn't work:
mSelection = mNotesAdapter.fetchAllNotes();
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
R.layout.note_row, mSelection, new String[] { "title"},
new int[] { R.mostrador.title});
setListAdapter(adapter);
This code works:
mSelection = mNotesAdapter.fetchAllNotes();
SimpleCursorAdapter adapter = new SimpleCursorAdapter(this,
android.R.layout.simple_list_item_1, mSelection, new String[] { "title"},
new int[] { R.mostrador.title});
setListAdapter(adapter);
1) Your first code will not work because R.mostrador.title is not the id of the TextView in the layout android.R.layout.simple_list_item_1. Try to replace it with android.R.id.text1.
2) If you want to select an item in your ListView, you should change the background of the selected item:
<ListView
android:choiceMode="singleChoice"
android:drawSelectorOnTop="false"
android:listSelector="#cccccc"
.../>