Simple Page Creation in Share

cancel
Showing results for 
Search instead for 
Did you mean: 

Simple Page Creation in Share

Intermediate II
0 17 15.4K

Introduction



The purpose of this post is to introduce the steps required to add a page to Share using some of the updates outlined in my previous post. Hopefully if you've had previous experience of adding pages to Share you'll see how this approach simplifies the process. As this series of posts continues the examples will get progressively more detailed - I just want to get the basic concepts nailed down first!



As with the last post, this information refers to the latest code in HEAD SVN and will appear in future 4.2 Community and Enterprise releases.

Create a New Page



To create a new page in Share using the new capabilities added by recent updates you can now do the following:



  1. Create a new WebScript (made up of the following files)



    • “new-page.get.desc.xml” (WebScript descriptor)


    • “new-page.get.js” (WebScript controller)


    • “new-page.get.html.ftl” (WebScript template)




  2. Place these files in any path under “<tomcat-home>/webapps/share/WEB-INF/classes/alfresco/site-webscripts”


The WebScript Descriptor should contain the following:



<webscript>

   <shortname>My New Page</shortname>

   <url>/my-new-page</url>

</webscript>


The WebScript Controller should contain the following:



model.jsonModel = {

   widgets: [{

      name: 'alfresco/logo/Logo”

   }]

};


The WebScript Template should contain the following:



<@processJsonModel group='share'/>


Now open the web browser of your choice and point it at http://<server>:<port>/share/page/dp/ws/my-new-page and you should see the following…



Screenshot of page with Alfresco logo



Not the most exciting page in the world granted, but implemented with fairly minimal effort.

Widget Creation Configuration



What if we don’t want to just display the Alfresco logo? What if we want to display a different logo? Fortunately the “alfresco/logo/Logo” widget declares a number of different CSS rules that allow us to easily change the logo that is rendered. Update the JavaScript controller to be the following:

model.jsonModel = {

   widgets: [{

      name: 'alfresco/logo/Logo',

      config: {

         logoClasses: 'surf-logo-large'

      }

   }]

};


If you make the changes to the source files in the deployed web application you can apply these changes simply by refreshing the WebScripts by clicking the “Refresh Web Scripts” button on the Web Scripts home page (http://<server>:<port>/share/service/index)



When you refresh the page you should now see:



Screenshot of page showing Surf logo



What we've done is simply add some instantiation arguments to the “alfresco/logo/Logo” widget to override the default “logoClasses” attribute with a different CSS class that a selector was defined in the CSS resource associated with it. In the JSON model the “name” attribute refers to the name of the widget that you want to instantiate (technically it refers to the Module Identifier or “MID”) and “config” attribute is an object passed during instantiation of that widget.

A Simple Menu Bar



Let’s build something a bit more interesting; replace the contents of the JavaScript controller with the following:

model.jsonModel = {

   widgets: [{

      name: 'alfresco/menus/AlfMenuBar',

      config: {

         widgets: [{

            name: 'alfresco/menus/AlfMenuBarItem',

            config: {

               label: 'One'

            }

         },{

            name: 'alfresco/menus/AlfMenuBarItem',

            config: {

               label: 'Two'

            }

         }]

      }

   }

]};


This now creates a basic menu bar with two menu items (don’t worry for the moment that these menu items don’t do anything yet, we’ll get onto that in a future post!).



Screenshot showing page with 2 item menu bar



The key thing to note here is the use of the “widgets” attribute in the “config” object of the “alfresco/menus/AlfMenuBar”. Where one widget can be the parent to child widgets it is always possible for the model for those children to be defined in an array assigned to the “widgets” attribute. This repeating pattern is one of the many ways in which Surf is able to establish all the dependencies to load onto the page.

Adding a Drop Down Menu



Let’s make the menu bar a bit more detailed, update the model to be the following:



model.jsonModel = {

   widgets: [{

      name: 'alfresco/menus/AlfMenuBar',

      config: {

         widgets: [{

            name: 'alfresco/menus/AlfMenuBarPopup',

            config: {

               label: 'One',

               widgets: [{

                  name: 'alfresco/menus/AlfMenuItem',

                  config: {

                     label: 'Popup item 1'

                  }

               },{

                  name: 'alfresco/menus/AlfMenuItem',

                  config: {

                     label: 'Popup item 2'

                  }

               }]

            }

         },{

            name: 'alfresco/menus/AlfMenuBarItem',

            config: {

               label: 'Two'

            }

         }]

      }

   }

]};


The result should be:



Screenshot showing page with menu bar where 1st item is a drop-down menu

Adding Cascading Menus and Icons



We've now converted the first menu item to be popup menu containing two more menu items (note again the repeating config/widgets/config/widgets pattern). Let’s now add some icons to the menu items, do some grouping and add a cascading menu… try this model in your JavaScript controller:

model.jsonModel = {

   widgets: [{

      name: 'alfresco/menus/AlfMenuBar',

      config: {

         widgets: [

         {

            name: 'alfresco/menus/AlfMenuBarPopup',

            config: {

               label: 'One',

               widgets: [

               {

                  name: 'alfresco/menus/AlfMenuGroup',

                  config: {

                     label: 'Group 1',

                     widgets: [{

                        name: 'alfresco/menus/AlfMenuItem',

                        config: {

                           label: 'Popup item 1',

                           iconClass: 'alf-edit-icon'

                        }

                     },{

                        name: 'alfresco/menus/AlfCascadingMenu',

                        config: {

                           label: 'Popup item 2',

                           iconClass: 'alf-cog-icon',

                           widgets: [

                           {

                              name: 'alfresco/menus/AlfMenuItem',

                              config: {

                                 label: 'Cascaded menu item 1',

                                 iconClass: 'alf-leave-icon'

                              }

                           },{

                              name: 'alfresco/menus/AlfMenuItem',

                              config: {

                                 label: 'Cascaded menu item 2',

                                 iconClass: 'alf-help-icon'

                              }

                           }]

                        }

                     }]

                  }

               },{

                  name: 'alfresco/menus/AlfMenuGroup',

                  config: {

                     label: 'Group 2',

                     iconClass: 'alf-logout-icon',

                     widgets: [{

                        name: 'alfresco/menus/AlfMenuItem',

                        config: {

                           label: 'Popup item 3',

                           iconClass: 'alf-profile-icon'

                        }

                     }]

                  }

               }]

            }

         },{

            name: 'alfresco/menus/AlfMenuBarItem',

            config: {

               label: 'Two'

            }

         }]

      }

   }

]};


Once the WebScripts are refreshed and the page is reloaded you should see:



Screenshot of page showing menu with dropdowns, cascaded and icons

Summary and Next Steps



Without writing a single line of (traditional) HTML, JavaScript or CSS it has been possible to construct a page containing a reasonably detailed menu bar. OK, so at the moment this menu bar doesn't actually do anything but we’re just getting started. The purpose of this post is simply to explain a new way of adding a page to Share and how to start building a JSON model for the contents of that page. In future posts I’ll be explaining how…



  • To create your own widget to include in a model


  • The various localization options for your pages and widgets


  • To define events in your model and introducing some of the out-of-the-box event handling services


  • The model is converted into dependencies and how to configure the dependency analysis


  • To wrap existing JavaScript widgets to work in the model


If you've previously done any JavaScript controller extensibility it should be fairly obvious how the existing mechanisms can be used to easily add, change and remove things from a default model. One of the main advantages of the new header bar in Share is not that you can easily change it without copying and pasting all of the XML that defined it.

The 'Hybrid Page'



The final thing I’d like to quickly point out is the availability of the “hybrid” view of page. By simply changing the URL to be http://<server>:<port>/share/page/hdp/ws/my-new-page (note the additional “h”) you will get the page content rendered between the standard Share header and footer.



Screenshot of menu bar between Share header and footer
17 Comments
Active Member
[...] my last post I explained the basics of creating a new page by a defining a JSON model of existing Alfresco [...]
Active Member
Hi,



I was trying your example but enable to make it work on 4.2 CE. I have put all new page  xml,ftl & js under \tomcat\shared\classes\alfresco\web-extension\site-webscripts.First of all url http://localhost:8080/share/page/page/dp/ws/my-new-page is not working & throwing share error. Now when i removed /dp/ws, it can be accessibl2 @ http://localhost:8080/share/page/my-new-page but throwing error as below saying processJsonModel not found.



The Web Script /share/page/my-new-page has responded with a status of 500 - Internal Error.



500 Description: An error inside the HTTP server which prevented it from fulfilling the request.



Message: 01280007 Failed to process template new-page.get.html.ftl

 

Exception: freemarker.core.InvalidReferenceException - on line 1, column 1 in new-page.get.html.ftl processJsonModel not found.





Can you help?



Regards.
Intermediate II
The code describes is currently ONLY available on the latest code committed to SVN, it is NOT featured in any current release (e.g. 4.2c Community) but will be in the next 4.2 Community and Enterprise releases. I've stated this at the top of the post, you might have missed it.

Regards,
Dave
Active Member
Sorry, i missed that.



Can you help me out on how to start on customize share 4.2, i want to create new pages, dashlets & widgets?



Regards.
Intermediate II
@Lalit - I'd suggest posting specific questions on the Alfresco Share Development forums (https://forums.alfresco.com/forum/developer-discussions/alfresco-share-development). The comments section of this blog isn't the appropriate location for answering those sorts of questions.
Active Member
[...] my second post in this series I showed how to create a page from existing widgets and in my last post I showed how [...]
Active Member
[...] a previous post I described a simpler approach to constructing a page. This post will delve deeper into exactly [...]
Active Member
From wich version does this blog apply to ? 4.2.e / f ??



Yours,



Jyri
Intermediate II
@Jyri - this blog was written during 4.2 development and will certainly be applicable to 4.2.e and 4.2.f - it will certainly work against the latest Community versions
Active Member
Dear Dave,



How can i create share custom page, using a form based on my model(content-type).

I have searched a lot and found that using webscript can call api by js, but i am not good at js.

So i want to create page by using a model-based-form .

I am using 4.2.f, a lot of article and documentation was out of date..LOL.



Thanks a lot
Intermediate II
@Sean - that's a somewhat specific question that I suggest would be better answered on the Alfresco forums. I'm not sure that we have the widgets in place (in the new framework) for you to do this via the approach described in this blog. However, the forms-runtime is designed to create model-based forms so I would recommend using that.
Active Member
Hi, is it possible add this 'new-page' in customise-site page in order to add the page to the site bar? I'm new to alfresco, I tried to add the new-page to share-config-custom.xml, in this way:





  

     

         calendar

         wiki-page?title=Main_Page

         documentlibrary

         discussions-topiclist

         blog-postlist

         links

         new-page

     

  





but the 'new-page' is not present. The page 'customize-site' shows me 'ERROR: page new-page not found!'



How can I do this?

Thks in advance.

Stefano
Active Member
Sorry I have posted html code in wrong way.







  

     

         calendar

         wiki-page?title=Main_Page

         documentlibrary

         discussions-topiclist

         blog-postlist

         links

         new-page

     

  



Intermediate II
Active Member
Hi. I have a problem with hybrid page. I pass arguments for /my-new-page and when I try to access /hdp/ws/my-new-page, the arguments provided by URL are null. If I construct this arguments in page /hdp/ws/my-new-page, i.e., give for XML instead of only /my-new-page, /hdp/ws/my-new-page, but with this, I get the page without template. Any solution? Thanks in advance.
Intermediate II
Are you passing the arguments are request parameters or URL tokens?
Established Member

Hi Dave,

I am able to get the dropdown menu on the newly created page. I have two doubts:

1. How to get a "Select Files" widget on the page?

2. How to access the value that user selects in those dropdowns?

Please help.