Multi-Tab Canvas Navigational Controls

I want to control navigation out of a block displayed on a "tab" canvas to other "tabs" in a form containing multiple tab canvases. Are ther any "events triggers" associated with the "tab" level similar to the "WHEN_BUTTON_PRESSED" trigger such as "WHEN_TAB_SELECTED"?
I assume I must place the triggers on the block (or blocks) associated with the respective tabbed canvases.
null

The trigger must be placed at the form level. Use "if :system.cursor_block = 'BLK'"
to code for each tab.

Similar Messages

FRM-40202 and mandatory items on a multi-tab canvas

Hi all !
Short technical question for you guys : let's say that I have datablock whose fields are displayed on different tabs of a same tab canvas. Now, let's say that two fields of this datablock are defined as mandatory : one on the first tab, the other on the last.
My problem is that my form doesn't behave correctly :
Good behavior -> After creating a record on the first tab without filling the mandatory record of the last tab, if I try to create a new record => I get a FRM-40202 error, and Forms forces me to fill the mandatory field of the last tab. Nice.
Bad behavior -> After creating a record on the first tab, I try to go to the last tab by clicking the appropriate tag name in order to fill the mandadory field => I get a FRM-40202, and Forms leaves me on the first tab, unable to fill in my record properly. I thought that as long as I wasn't leaving my record, I wasn't supposed to get a FRM-40202 error...
How would you deal with this kind of error ? How can I get this kind of error while not leaving the record ?
Thanks for your ideas and your help
Regards,

Hi,
are you sure you're not navigating to another record or block? (or trying to save...) Make sure it enabling debugging messages or tracing it...
The error message in thiscase is clear...
Regards,
Jose L.

Glossary Tab and Navigation Controls

Hi
Our company has been asked to test our application using a
Japanese version of Windows. Neither the program nor the help will
be translated. Our QA department found two help-related problems:
1. The TOC, Index, and Search tabs appear in Japanese, but
the Glossary tab does not.
2. The Navigation Control I inserted for the Related Topics
appears as a square with a dot in the middle as if it were a
missing image, and nothing happens when you click it.
I'd appreciate any help you can offer to either show the
Glossary tab in Japanese, or the other three in English, and to get
my Related Topics popup back.
I use RoboHelp 7.02 HTML and generate CHM files.
Thanks,
Jennifer

Hi there
Likely you need the 64 bit version of the HHActiveX.dll. I believe this is only available in RoboHelp HTML version 9.
If you have version 9 I received this from a Question I asked of Adobe:
...you can get the 64 bit version of HHActiveX.dll in RoboHelp 9.0. It is kept at "<RoboHelp 9.0 install folder>\Redist\x64\HHActiveX.dll"
If RoboHelp 9.0 is installed on your machine, this activeX control is already registered. Otherwise you need to register this DLL.
To register HHActiveX.dll,
1> Run Command prompt(cmd.exe) as administrator
2> Type "regsvr32 <HHActiveX.dll full path>" and press Enter.
3> This should show that the registration is done successfully.
Now working with 64 bit version of HH.exe should also show Glossary and Browse Sequences.
You might download version 9 and test.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7, 8 or 9 within the day!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Tab Canvas Navigation

Hello,
In the form I have 2 blocks, Activities and Parts, both split between 2 tabs.
On tab1 I have the blocks' items and on tab2 the mirrors of them which synchronize with main items.
Now, when I move from one block to the other the tab page changes.
I store block and tab page into parameters and set them at runtime time accordingly in the validation, delete/insert recs triggers, so It pretty much stays on the right page, but sometimes when I move up and down, or when no validation occurs the tab page changes.
Plus, if I use timers(ugly method) for go_item in validation triggers the focus is not going where I instruct. I know the focus is lost on When-Timer-Expired trigger, but why is not executing go_item, or better said is going to the item but I have to press a key to see the focus?
Any idea would be appreciated to help me fix this nasty navigation.
Thanks,
Monica

Now that I renamed my tab1 as 3, upon entering the block it is first navigating to tab3.The form doesn't navigate to a tab, it navigates to the "focused" item, means the item where the cursor is placed on. So, if you want another tab to shown by default, you have to order the items in your block so that the first navigable item is visible on tab1.

Adding tabs dynamically at runtime for a tab navigator control

Hi,
Is it possible in flex builder 2 to dynamically add the tabs
at runtime to the tab navigator control, if we can add plz tell the
procedure to do that
thanks in advance

Given that you had a tab navigator declared in mxml like
this:
<mx:TabNavigator id="myTabber" selectedIndex="0">
</mx:TabNavigator>
you should just be able to call the addChild method, passing
the child tab containers. So for example, in some ActionScript
event handler:
var newTab:Canvas = new Canvas();
myTabber.addChild(newTab);
bear in mind I haven't done this by adding tabs, but have
done tons with adding controls to an application at runtime using
this method (DataGrids, Grid, GridItems, etc...)
Jason

Tab Canvas controlled programmatically

Hi,
I have tab canvas which had tab1 and tab2.
Tab1 have master data and tab2 has detail information .
I have Detail button in tab1 ... if i click the
Detail button
in when-button-pressed
Go_block('Detail_blk');
control goes to the new block, but the tab scope (tab2) is not showing ...
How do i change the make visible tab2 when i do click the detail button from the tab1.
Thanks
Mani

Yours is a combination of issues. Just going to the block will not ensure the Tab Page and stacked canvas will be visible. Unfortunately, in this situation, you cannot relay on a simple GO_BLOCK to display everything correctly. You will have to explicitly display the Tab Page (as dfcii indicated) and you will need to explicitly show your stacked canvas with Show_View. When you leave your stacked canvas, you will need to ensure it is hidden as well as you can't rely on the When-Tab-Page-Changed (WTPC) trigger to hide your stacked canvas. Consequently, you will need to include a call to Hide_View in your WTPC trigger. Also, make sure you navigate away from the item in your stacked canvas before you call Hide_View.
Hope this helps,
Craig B-)
If someone's response is helpful or correct, please mark it accordingly.

Tab canvas, tabs navigation

In my tab canvas, for some reason, I had to make my tab1 as tab3 now. I want the users to be able to navigate
in the normal order tab1,2,3 (as they are laid out in the object navigator). Now that I renamed my tab1 as 3, upon entering the block it is first navigating to tab3.
Is there a way/place to specify the order or tab navigation at design time?
Thanks,
Chiru

Now that I renamed my tab1 as 3, upon entering the block it is first navigating to tab3.The form doesn't navigate to a tab, it navigates to the "focused" item, means the item where the cursor is placed on. So, if you want another tab to shown by default, you have to order the items in your block so that the first navigable item is visible on tab1.

How to execute each block in a multi-block canvas while select the tab?

Hi All,
How to execute each block in a multi-block canvas by selecting a tab? I mean to say when i select a particular tab in a tab canvas the records should execute.How can i set this?
Arif

Hi Arif
Good Example Manu offered i wish it works if not pls try the following...
Pls try in the when-tab-page-changed trigger in the form level
DECLARE
    tp_name varchar2(30);
BEGIN
-- Retrieve the NAME of the top most tab page using the built-in GET_CANVAS_PROPERTY function.
--Pass in the name of the Canvas your tabs are in and the system variable topmost_tab_page which stores a property number
tp_name := GET_CANVAS_PROPERTY('CANVAS11',topmost_tab_page);
-- Perform specific tasks based on the name of the top most tab
IF tp_name = 'PAGE12' then
GO_BLOCK('block_name');
   GO_ITEM('DATA_BLOCK_1.FIELD_1');
EXECUTE_QUERY;
ELSIF tp_name = 'PAGE38' then
GO_BLOCK('block_name');
   GO_ITEM('DATA_BLOCK_2.FIELD_1');
EXECUTE_QUERY;
ELSIF tp_name = 'PAGE47' then
GO_BLOCK('block_name');
   GO_ITEM('DATA_BLOCK_3.FIELD_1');
EXECUTE_QUERY;
END IF;
END;
Hope it helps...
Note: i do agree with Craig
Regards,
Abdetu...
Edited by: Abdetu on Feb 2, 2011 7:41 AM

Tabbing (Next Navigation Item) to different frames/datasets on a canvas?

How can I set the tab order to tab between frames on my form? In the properties palette for an item, the Next Navigation Item field, I can only choose items in the same dataset. What if I wanted to mix and match the fields from say 2 different datasets so they show up together in a frame and have consistent tabbing?
Also, I have set up a join relationship between 2 datasets on a canvas but when I insert record it only inserts 1 set and not the info from the other but when I query info that was already in the dataset it shows up fine on both sets??? Please help. Thanks alot

To achieve cross-block navigation, here is what I do:
For forward tabbing as well as automatic skipping to same field, create a hidden navigable item following the item, and on that item, create a when-new-item-instance trigger with a go_item command. (For hidden navigable, it must be on the same canvas. Just set its height and width to zero.)
For shift-tab (reverse navigation), use a key-prev-item trigger on the second item with a go_item back to the first item.

Controlling focus in a Tab Canvas when a FORM_TRIGGER_FAILURE is raised

Hello,
I am currently working on a form that is using a Tab Canvas. The canvas has about 9 pages, and I am, at this moment, adding error handling functionality on the fifth page. My problem happens when a condition is met that raises a FORM_TRIGGER_FAILURE exception and the focus automatically goes to the first page of my canvas instead of staying on the fifth page. Is there anyway I can set the focus so that it remains on page 5 instead of going back to the front page?
Thank you,
Jojo

I use tabs, and a FORM_TRIGGER_FAILURE will not by itself cause focus to move to the first tab. There is something happening in your form just prior to the FORM_TRIGGER_FAILURE that is placing focus to some item in the first tab (maybe you're calling a function or procedure that is doing it?). If you don't know, try running the debugger and trace through your code during runtime and see what is causing it.

Detail Window of a Tab canvas

I have a tab canvas with one tab filling up the whole tab page with 15 horizontal line, but the last column is a detail button which I want to see additional info for that line,
should I add rowid for that block - to select that row when I press the detail button??
Do I use a stacked canvas or a content canvas?
Do I need a new block for that detail info and use a post query from the 1st block to populate the second block??
Any insight would be helpful
Thx

Since you are so set on the post-query method, do this:
Do NOT use a post-query. Just create one or more additional items in the same block that are assigned to a separate stacked canvas. Set these items singly-occurring (property Number-of-Items-Displayed = 1). Create a "Details" button in your block on the main canvas that user can click. All its WBP trigger needs to do is:
Go_Item('Blk.Detail_Item');
I don't think you even need a:
Show_View('Detail_Canvas');
On the stacked canvas, create a cancel button with a WBP trigger that does a Go_Item('Blk.<main-canvas-item>'). And make sure you cannot use the Tab or Enter key to navigate into the details canvas items (Set the appropriate Next-Navigation-Item properties).
The above method is certainly the easiest. However, if for some odd reason, you don't want to fetch all the details for every record during the initial query, then you can use a different method. This one involves the same stacked canvas and details button. But use a control block and one or more items to display the data. In the WBP trigger, Select detail_columns into :Control_Block.detail_item where rowid = :base_table_block.rowid; and then Go_Item('Control_block.detail_item'); Control_block.detail_item is of course displayed on the stacked canvas.

Newbie Help - Tab Canvas with Multiple Pages, Arrow to Navigate between

Hi All,
I am developing my first form. It is a page that requires several pages. I have created a tab canvas and put the pages on (there are 10 pages). When i run the form, i can see the first 4 page headers, and cannot see the other headers. Is there a way to have a arrow at the top so i can click on it to move the display so i can see the other pages?
How would this normally be done? What i am after is a similar multi page navigation to that in the assignment screen, or any oracle screen with several pages.
many thanks
Rupz

Hi, thanks for your reply.
If i press F2, a list of all of the pages appear, but i do not get any arrows.
I have a single tab canvas with 10 pages on it. The pages fit on the canvas, but not on the display window. Do i need to modify the canvas in any way to get the navigation arrows to display?
thanks
Rupz

Tab canvas + post-forms-commit + form_trigger_failure

Hi all,
There is a tab canvas with eight tab pages in my forms.
In the post-forms-commit form-level trigger there are controls based on some conditions before executing the processes. When the conditions in the controls are not met then a stop alert is shown and form_trigger_failure is raised. All of these actions , that is the alert and form_trigger_failure , are contained inside a procedure named affiche_erreur.
The problem is that after pressing the alert button then forms goes to the first tab page. And the focus is on a non-navigable button ! Very strange !
I trapped the form_trigger_failure exception in post-forms-commit , but untill now I do not find any way how to put the focus in a specific item.
So how to put the focus into a specific item or a specific tab page ?
Thank you very much indeed

Mark , the when-tab-page-changed trigger does not fire after I pressed the alert button although the focus goes always to the non-navigable button in the first tab-page. I wrote a pause statement at the beginning of the when-tab-page-changed trigger but there was no pause alert at runtime.
Finally I created a timer in the exception of the post-forms-commit trigger which catches the form_trigger_failure exception , and in the when-timer-expired trigger I wrote go_item.

Problem with tab-key navigation

I am making chanegs to an existing form.
I have a tab canvas with 3 tabs, each contains a data block, and other data blocks outside of the tab canvas.
I wanted the tab key to move the cursor to the next record so I changed the navigation style from "Change Block" to "Change Record", but it did not help. When the cursor is a on a record of a multi-record block and I tab through the items to the last one, pressing the tab key leads me to another tab-page.
I put in some debug code and noticed that the WHEN-TAB-CHANGED trigger did not fire. The WHEN-VALIDATE-RECORD trigger fired and the cursor block and record number were correct.
After the tab key took me to another tab-page and I navigated back to the original tab-page. Even though it looks like I'm on the correct tab page, SYSTEM.cursor_block was NOT correct, it was pointing to another data block outside of the tab canvas.
I checked other forms on our system and I'm pretty sure that changing the navigation style to "Change Record" would work. Perhaps there's something peculiar about this form.
Any idea will be appreciated.
Thanks.

Found the problem.
For some reason, the WHEN-NEXT-ITEM trigger of the last item of the record is hard-coded to go the another block.

LightSwitch HTML multi-level tile navigation menu

I am working on a multi-level tile navigation system for the LS HTML client. The idea is to have tiles on the home screen that when tapped navigate to a lower-level screen with more tiles that eventually lead to browse screens with the actual LS data.
Here is what I have so far (simplified of course). Looking for suggestions on how to improve this. TIA!
Home navigation tiles (these tiles appear on the application Home Screen)
-Orders - tap goes to Orders Home screen with additional tiles.
-Customers - tap goes to Customers Home screen with additional tiles.
-Lookups - tap goes to Lookups Home screen with additional tiles.
Order Navigation Tiles (these tiles appear on the Order home screen)
-Orders (search/browse Orders)
-Returns (screen based on a modeled query of Orders)
-other tiles for screens based on modeled queries of Orders
Customer Navigation Tiles (these tiles appear on a Customers home screen)
-Customers (search/browse Customers)
-other tiles based on modeled queries of Customers
Lookup Navigation Tiles
- Each tile links to a browse screen for one of the lookup tables.
>>>>
(didn't create an image/icon for this yet)
>>> ItemTap leads to a browse screen for "Test Records".
To power this menu system, there is a database table MenuTiles.
MenuTiles:
Title
Description
ScreenId
MenuGroup choicelist
-HomeGroup
-OrderGroup
-CustomerGroup
ImageFileName (contains the name of the static image file for the tile)
I have three modelled queries to get the tiles associated with each group. The Home Screen gets its tiles from a modelled query selecting the tiles with MenuGroup == HomeGroup. The other screens work the same way respectively.
The Home screen has the following js. The other screens have similar methods.
myapp.Home.ImageFileName_render = function (element, contentItem) {
contentItem.dataBind("value", function (newValue) {
var newFileName = newValue;
if (newFileName !== null && newFileName !== undefined) {
element.innerHTML = "<image src='Content/Images/Tiles/" + newFileName + ".png'>";
myapp.Home.MenuTilesHomeGroup_ItemTap_execute = function (screen) {
var entity = screen.MenuTilesHomeGroup.selectedItem;
var modelItem = entity.details.properties["ScreenId"].value;
if (modelItem !== null && modelItem !== undefined) {
myapp.showScreen('Browse' + modelItem);
This all seems to work well. The databind on the ImageFileName keeps the images updated on the screen if they are added or changed. The ItemTap_execute function correctly navigates to a lower level navigation screen or a browse screen for the
appropriate entity collection.
The problem I have with it is it seems to rely on magic strings and that sort of thing. For example, if the ScreenId does not match the name of a screen it will error. If the ImageFileName does not match an image in the folder, it shows the default
placeholder. Is there a better way to do this?

Nice Job Hessc! I also like Dales tile menu that Dave mentioned.
For a look at another example, albeit not multi-level, see how
syncfusion does tiles in this demo:
Javascript
myapp.Home.ScreenContent_render = function (element, contentItem) {
TileCreation(element, contentItem);
$(".tile-li").on("click", function (args) {
var screen = args.currentTarget ? $(args.currentTarget).attr('data') : "";
myapp.showScreen(screen);
function TileCreation(element, contentItem) {
var SampleList = [
{ imgClass: "Editor", sampleName: "Editors", screenName: "BrowseEmployeeInfo" },
{ imgClass: "DatePicker", sampleName: "DatePicker", screenName: "DatePicker" },
{ imgClass: "DateTimePicker", sampleName: "DateTimePicker", screenName: "DateTimePicker" },
{ imgClass: "TimePicker", sampleName: "TimePicker", screenName: "TimePicker" },
{ imgClass: "Editor", sampleName: "TextBoxes", screenName: "TextBoxes" },
{ imgClass: "RichTextBox", sampleName: "RichTextEditor", screenName: "RichTextEditor" },
{ imgClass: "AutoComplete", sampleName: "AutoComplete", screenName: "AutoComplete" },
{ imgClass: "DropDownList", sampleName: "DropDownList", screenName: "DropDownList" },
{ imgClass: "Slider", sampleName: "Slider", screenName: "Slider" },
{ imgClass: "ProgressBar", sampleName: "ProgressBar", screenName: "ProgressBar" },
{ imgClass: "grid", sampleName: "Grid", screenName: "Grid" },
{ imgClass: "Chart", sampleName: "Chart", screenName: "Chart" },
{ imgClass: "CircularGauge", sampleName: "CircularGauge", screenName: "CircularGauge" },
{ imgClass: "LinearGauge", sampleName: "LinearGauge", screenName: "LinearGauge" },
{ imgClass: "DigitalGauge", sampleName: "DigitalGauge", screenName: "DigitalGauge" },
{ imgClass: "TreeMap", sampleName: "TreeMap", screenName: "TreeMapFlatCollection" },
{ imgClass: "Maps", sampleName: "Maps", screenName: "Maps" },
{ imgClass: "RangeNavigator", sampleName: "RangeNavigator", screenName: "RangeNavigator" },
{ imgClass: "BulletGraph", sampleName: "BulletGraph", screenName: "BulletGraph" },
{ imgClass: "ReportViewer", sampleName: "ReportViewer", screenName: "ReportViewer" }
var root = $('<ul class="tile-ul"></ul>'), content = "";
$(element).append(root);
$(SampleList).each(function (i, val) {
content = "<li class='tile-li' data='" + val.screenName + "'> " +
"<div><span class= 'innerList tile-img " + val.imgClass + "'>" + "</span>"
+ "<span class= 'innerList tile-txt'>" + val.sampleName + "</span></div>"
+ "</li>"
$(root).append(content);
// to remove screen display name in layout
$(".msls-label").remove();
CSS:
/*Sample Layout design CSS*/
ul.tile-ul {
list-style-type: none;
margin: 30px 0;
padding: 0;
li.tile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.charttile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.charttile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
.charttile-li > div {
text-align: center;
li.charttile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.charttile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.charttile-li span.tile-img.Chart {
background-image: url("SampleImg/Chart.png");
li.gridtile-li {
float: left;
font-size: 16px;
height: 157px;
width: 157px;
li.gridtile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
.gridtile-li > div {
text-align: center;
li.gridtile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.gridtile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.gridtile-li span.tile-img.grid {
background-image: url("SampleImg/grid.png");
.tile-li > div {
text-align: center;
li.tile-li span.tile-img {
border: 1px solid #606161;
display: block;
height: 100px;
margin: 0 auto;
width: 100px;
background- center;
background-repeat: no-repeat;
background-color: #282827;
li.tile-li span.tile-img:hover {
border: 1px solid #606161;
background-color: #474747;
li.tile-li span.tile-img:active {
border: 1px solid #606161;
background-color: #191818;
li.tile-li span.tile-img.Editor {
background-image: url("SampleImg/Editor.png");
li.tile-li span.tile-img.grid {
background-image: url("SampleImg/grid.png");
li.tile-li span.tile-img.Employee {
background-image: url("SampleImg/EmpManage.png");
li.tile-li span.tile-img.CircularGauge {
background-image: url("SampleImg/Radial Gauge.png");
li.tile-li span.tile-img.DigitalGauge {
background-image: url("SampleImg/Digital Gauge.png");
li.tile-li span.tile-img.LinearGauge {
background-image: url("SampleImg/Linear Gauge.png");
li.tile-li span.tile-img.Chart {
background-image: url("SampleImg/Chart.png");
li.tile-li span.tile-img.RangeNavigator {
background-image: url("SampleImg/RangeNavigator.png");
li.tile-li span.tile-img.BulletGraph {
background-image: url("SampleImg/BulletGraph.png");
li.tile-li span.tile-img.TreeMap {
background-image: url("SampleImg/TreeMap.png");
li.tile-li span.tile-img.Maps {
background-image: url("SampleImg/Maps.png");
li.tile-li span.tile-img.ReportViewer {
background-image: url("SampleImg/ReportViewer.png");
li.charttile-li span.tile-img.MultipleAxes {
background-image: url("SampleImg/MultipleAxes.png");
li.charttile-li span.tile-img.Chart3D {
background-image: url("SampleImg/Chart3D.png");
li.charttile-li span.tile-img.LiveChart{
background-image: url("SampleImg/LiveChart.png");
li.charttile-li span.tile-img.CombinationChart {
background-image: url("SampleImg/CombinationChart.png");
li.charttile-li span.tile-img.DrillDown {
background-image: url("SampleImg/DrillDown.png");
li.gridtile-li span.tile-img.FlatGrid {
background-image: url("SampleImg/FlatGrid.png");
li.gridtile-li span.tile-img.Exporting {
background-image: url("SampleImg/Exporting.png");
li.gridtile-li span.tile-img.Summary {
background-image: url("SampleImg/Summary.png");
li.gridtile-li span.tile-img.ColumnTemplate{
background-image: url("SampleImg/ColumnTemplate.png");
li.tile-li span.tile-img.DatePicker {
background-image: url("SampleImg/DatePicker.png");
li.tile-li span.tile-img.DateTimePicker {
background-image: url("SampleImg/DateTimePicker.png");
li.tile-li span.tile-img.TimePicker {
background-image: url("SampleImg/TimePicker.png");
li.tile-li span.tile-img.RichTextBox {
background-image: url("SampleImg/RichTextBox.png");
li.tile-li span.tile-img.AutoComplete {
background-image: url("SampleImg/AutoComplete.png");
li.tile-li span.tile-img.DropDownList {
background-image: url("SampleImg/DropDownList.png");
li.tile-li span.tile-img.Slider {
background-image: url("SampleImg/Slider.png");
li.tile-li span.tile-img.ProgressBar {
background-image: url("SampleImg/ProgressBar.png");
.e-handle.e-select.ui-link {
margin: 0 0 0 -16px !important;
width: 28px !important;
height:17px !important;
.msls-label {
margin-bottom: 8px;
.innerList.tile-txt {
display: block;
word-wrap: break-word;
font-family: 'Segoe UI';
font-size: 14px;
color: #cececd;
margin-top:5px;
.innerList.tile-txt:hover {
color: #bababa;
.innerList.tile-txt:active {
color: #eaeaea;
.msls-header .msls-header-area {
padding: 2px 25px;
.msls-title-container .msls-title{
padding-top:2px;
h1.msls-title .msls-text-container, .msls-control-header .msls-text-container {
letter-spacing: 1px;
white-space: pre-line;
.ui-body-a, .ui-overlay-a {
background: none repeat scroll 0 0 #111111 !important;
.msls-dialog-inner-frame.ui-body-a.msls-rows-layout {
background: none repeat scroll 0 0 #111111 !important;
.msls-footer.ui-footer.ui-bar-a {
background-color: black !important;
.msls-dialog-inner-frame {
border-color:#484848 !important ;
.ui-header-fixed, .ui-footer-fixed {
z-index:0;
.msls-content {
padding-top:8px;
#msls-id-app-loading {
border-top-width:1px;
.msls-label.msls-label-align-left {
padding-top:7px;
.msls-tabs-container.ui-corner-all.ui-controlgroup.ui-controlgroup-horizontal {
padding-top: 12px;
@media (min-width: 320px) and (max-width:470px) {
li.tile-li, li.gridtile-li, li.charttile-li{
height: 150px;
width: 140px;
.msls-header .ui-title {
color: #eee;
font-family: "Segoe UI";
font-size: 13px;
@media (min-width: 480px) {
li.tile-li, li.gridtile-li, li.charttile-li{
height: 150px;
width: 147px;
Some things to notice are CSS classes are used to assign images and since it renders straight <UL> in a custom control, it prevents rendering all the extra DOM elements that LS tile list has - might make some customizations of look & feel
easier.
HTH,
Josh

Multi-Tab Canvas Navigational Controls

Similar Messages

Maybe you are looking for