Announcement

**iRadiate** · 03-12-2016, 02:16 PM

Re: Insert UX Component Into Grid

I tried inserting the component <head> and <body> code into the existing TabbedUI a5w but that just completely messed things up!

I've also tried putting the UX component on it's own a5w page then inserting the a5w page above the grid in a freeform edit region but it doesn't emit the page.

Is this incorrect syntax to emit a page in a freeform region?

Code:

<%a5 ?machine_service_state.a5w %>

2016-03-12_13-25-45.jpg

**JBrown** · 03-12-2016, 06:27 PM

Re: Insert UX Component Into Grid

I use this in the tabbed UI Header text field.

<%a5 a5w_include("YourFileName.a5w")%>

**GGandhi** · 03-12-2016, 06:29 PM

Re: Insert UX Component Into Grid

try this and see if it works:
create a new blank a5w page,
right click on the ux/dialog and select insert into a5w page and insert head section and body section respectively,
do the same with grid component next.
save this a5w page as any name you want.
then place this in the tabbed ui home page and view it
should work.

**iRadiate** · 03-13-2016, 11:03 AM

Re: Insert UX Component Into Grid

Thanks for the suggestions but neither of those methods work.
I didn't think this would be so difficult. Not sure what else to try ... open to any and all suggestions.

**GGandhi** · 03-13-2016, 01:17 PM

Re: Insert UX Component Into Grid

Originally posted by iRadiate View Post

Thanks for the suggestions but neither of those methods work.
I didn't think this would be so difficult. Not sure what else to try ... open to any and all suggestions.

you want to insert an ux above grid is that correct? and then place them in tabbedui home page?

**GGandhi** · 03-13-2016, 01:43 PM

Re: Insert UX Component Into Grid

http://screencast.com/t/GSPisKWXNeYn

take a look at this screencast, if this was not you were looking for, please post back. see if I or someone can help you out.

**iRadiate** · 03-13-2016, 04:43 PM

Re: Insert UX Component Into Grid

Thank you for the video Ghandi, and yes that's what I'm trying to achieve, although I am doing exactly the same thing but not getting the same result.

I have one UX component called Machine_Service_State. It looks like this:

1.jpg 2.jpg

I have one grid component called Whiteboard_NonEdit. It looks like this:

3.jpg

I combine them both into an a5w page called Test.a5w, code looks like this:

Code:

<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="Alpha Anywhere HTML Editor Version 12 Build 3182-4557">
<!-- must use in order to make XP Themes render -->
<meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<title></title>
<!--Alpha Five Temporary Code Start - Will be automatically removed when page is published -->
<!--CSS for tmpl -->
<link rel="stylesheet" type="text/css" href="file:///C:/Program Files (x86)/a5V12/css/GrBlue/style.css">
<!--Alpha Five Temporary Code End -->

<%a5
Delete tmpl_MACHINE_SERVICE
DIM tmpl_MACHINE_SERVICE as P
tmpl_MACHINE_SERVICE = a5w_load_component("Machine_Service_State") ''SYSTEM GENERATED COMMENT - PLEASE DO NOT REMOVE (LOAD:Machine_Service_State)

'Override settings start -----------------------------------------
with tmpl_MACHINE_SERVICE
.alias = "MACHINE_SERVICE"
_dialogFilename = "Machine_Service_State"
end with 
'Override settings end -----------------------------------------

delete x_MACHINE_SERVICE
dim x_MACHINE_SERVICE as p
x_MACHINE_SERVICE = a5w_run_Component(tmpl_MACHINE_SERVICE) 'SYSTEM GENERATED COMMENT - PLEASE DO NOT REMOVE (RUN:tmpl) (EDIT:Machine_Service_State)

?x_MACHINE_SERVICE.Output.Head.JavaScript
?x_MACHINE_SERVICE.Output.Head.CSS_Link
?x_MACHINE_SERVICE.Output.Head.Title 
%>

<!--Alpha Five Temporary Code Start - Will be automatically removed when page is published -->
<!--CSS for tmpl -->
<link rel="stylesheet" type="text/css" href="file:///C:/Program Files (x86)/a5V12/css/GrBlue/style.css">
<!--Alpha Five Temporary Code End -->
<%a5
'The componentAlias MUST be UNIQUE for each component on the page. It must not have spaces in the name. Keep name as short as possible
dim componentAlias as c 
componentAlias = "WHITEBOARD_NONE"
Delete tmpl_WHITEBOARD_NONE
DIM tmpl_WHITEBOARD_NONE as P
tmpl_WHITEBOARD_NONE = a5w_load_component("Whiteboard_NonEdit") 'SYSTEM GENERATED COMMENT - PLEASE DO NOT REMOVE (LOAD:Whiteboard_NonEdit)
'Following code allows you to override settings in the saved component. DO NOT REMOVE SYSTEM GENERATED OVERRIDE_SETTINGS
tmpl_WHITEBOARD_NONE.override_settings = <<%override_settings%
	componentName = componentAlias
	_gridFilename = "Whiteboard_NonEdit"
%override_settings%
'TIP: To refer to local or page variables in the override_settings string, you must first define a local
'dot variable called 'pageVar' with properties for all of the variables you want to reference. For example:
'	dim pageVar as p
'	pageVar.gridRowCount = 10
'Then, in the override_settings string, you can reference pageVar.gridRowCount. For example:
'	rows = pageVar.gridRowCount
'Resolve session and page variables in the override_settings string.
a5w_resolveVariablesInOverrideSettings(tmpl_WHITEBOARD_NONE,session,local_variables())
delete x_WHITEBOARD_NONE
dim x_WHITEBOARD_NONE as p
x_WHITEBOARD_NONE = a5w_run_Component(tmpl_WHITEBOARD_NONE)  'SYSTEM GENERATED COMMENT - PLEASE DO NOT REMOVE (RUN:tmpl_WHITEBOARD_NONE) (EDIT:Whiteboard_NonEdit)
if x_WHITEBOARD_NONE.RedirectURL <> "" then 
	response.redirect(x_WHITEBOARD_NONE.redirectURL)
	end
end if 
?x_WHITEBOARD_NONE.Output.Head.JavaScript
?x_WHITEBOARD_NONE.Output.Head.CSS_Link
%>
<!--Alpha Five Temporary Code Start - Will be automatically removed when page is published -->
<!--CSS for tmpl_WHITEBOARD_NONE -->
<link rel="stylesheet" type="text/css" href="file:///C:/A5Projects/Engineering.WebProjects/Default.WebProject/css/GrBlue/style.css">
<!--Alpha Five Temporary Code End -->
</head>

<body>

<%a5 ?x_MACHINE_SERVICE.Output.Body.Dialog2_HTML %>
<%a5 ?a5dialogHelper_generateCORSHeaders() %>

<%A5 ?x_WHITEBOARD_NONE.Output.Body.Search_HTML %>
<%A5 ?x_WHITEBOARD_NONE.Output.Body.Grid_HTML %>
<%A5 ?x_WHITEBOARD_NONE.Output.Body.DetailView_HTML	%>
<%a5 ?a5dialogHelper_generateCORSHeaders() %>

</body></html>

I have the TabbedUI use the Test.a5w page but only the UX component is displayed:

5.jpg 6.jpg

**iRadiate** · 03-13-2016, 04:43 PM

Re: Insert UX Component Into Grid

Ultimately, this is the appearance I'm trying to achieve with UX on top and Grid underneath inside the TabbedUI:

7.jpg

**GGandhi** · 03-13-2016, 05:06 PM

Re: Insert UX Component Into Grid

there may be some difference the way they work in version 12, here they seem to work well.
sorry couldn't help much.

**Steviev** · 03-13-2016, 05:49 PM

Re: Insert UX Component Into Grid

Hi Stephen..

Does the test.a5w work ok when published outside of the Tabbed UI ?

**iRadiate** · 03-13-2016, 06:24 PM

Re: Insert UX Component Into Grid

Originally posted by Steviev View Post

Hi Stephen..

Does the test.a5w work ok when published outside of the Tabbed UI ?

AHAH !!! Steve, so looking at the test.a5w alone, no it doesn't work, again only the UX component shows.
I revisited the UX component, maybe there's something wrong with it ... it's only one list component inside a panel card ... can't get much simpler right.
So I deleted the panel card leaving only a single list component in the UX. Low and behold, there it is working perfectly !!! The panel card must have been taking up the entire page.

Here's how it looks now:

1.jpg

Thanks so much everyone for your time and helpful suggestions.

Announcement

The Alpha Software Forum Participation Guidelines

Insert UX Component Into Grid

Insert UX Component Into Grid

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment