Single Page Application Design Approach Suggestion/Help

we have a new project requirement where we need to develop a single page application. My manager told me to do a research like whether we can use any content management system. Our requirement is we have lots of plugins. We are planning to create plugin download
and help system, where others can download the plugins,see demos and copy the code like the jquery.com and getbootstrap like below.Also we need to add a rating feature for each plugin.
http://getbootstrap.com/components/
Our client need it as a SPA and asked to check any CMS(content management system) like orchard,Drupal,WordPress or anything will help. Or we he put an option of Sharepoint or a MVC application with Angular/JQuery. Could you please give your suggestions for
the same.
vin

Please post questions related to ASP.NET in the ASP.NET forums (http://forums.asp.net ).

Similar Messages

How to handle jquery and ajax call in single page application using coded ui

Hi,
I am facing a very tricky situation while using coded ui. My application interact with ajax and I was facing the issue to handle the ajax in the login page and other pages. I went through the post : http://stackoverflow.com/questions/17849074/jquery-ajax-success-not-getting-triggered-with-coded-ui-test-project
and got solution for my problem. Now when ever a ajax is getting called in the page its getting handle with app config file. However the issue I am facing right now is.
When i click on a button a window will appear which is actually a "div tag". Please see the image below. In the that window when I have to select a item from drop down, the ajax will get called, however it will get called only for the window,
it wont be called for the entire page.. i.e. it will update only the window. I am not able to handle this ajax call, script gets stuck in refresh state. I will request you guys to provide a work around for it.
I would like to add more details - Visual studio version - 2013 update 3, IE11.
Application details: Its a single page application which uses bootstrap framework. All the ajax call are dynamic.
Thanks in advance.

Thanks for the reply.
The window is not exactly a pop up window. Its a div tag in the same page. As this is my first time to work on a single page application I am not sure how it works. For the entire page I am able to handle the ajax call however the action performed
in the div tag is not getting handled.
Code for the window, I am not sure to what extend will it be helpful.
<div class="modal-content"><div class="modal-header"><div class="bootstrap-dialog-header"><div class="bootstrap-dialog-close-button" style="display: none;"><button class="close">×</button></div><div
class="bootstrap-dialog-title">Move Item to different task [FocusAudit]</div></div></div><div class="modal-body"><div class="bootstrap-dialog-body"><div class="bootstrap-dialog-message"><div><div
id="dashboard">
<table class="TFtable">
<tbody><tr>
<td colspan="2">
You are about to move the 24 selected item item to a different task. Select the task to which to move this item, (Optionally) enter notes about the task change, and click 'Change' to continue.
</td>
</tr>
<tr>
<td>Select New WorkFlow:</td>
<td><select class="form-control" id="MA_workflow" onchange="ChangeWorkFlow()"><option value="647446014">Batches<option value="647446007">Claim<option value="647446065"
selected="">Workflow1</option></select></td>
</tr>
<tr>
<td>Select New Task:</td>
<td><select class="form-control" id="MA_actions"><option value="647446025">BatchRebuild</option><option value="647446054">Complete</option><option value="647446039">DataIntegrityCheck</option><option
value="647446038">FocusAudit</option><option value="647446053">FocusAuditMiner</option><option value="647446037">FocusAuditSelect</option><option value="647446055">LocationRouter</option><option
value="647446029">MineForSBT</option><option value="647446022">OCRtoWebDE</option><option value="647446024">OnePass</option><option value="647446049">OnePassRouter</option><option
value="647446050">OnePassUS</option><option value="647446060">QAuditImporter</option><option value="647446045">QIAutoAuditGrader</option><option value="647446058">QIAutoAuditInjector</option><option
value="647446048">QIMiner</option><option value="647446040">QISampler</option><option value="647446056">QIVerify</option><option value="647446059">QIVerifyGrader</option><option
value="647446047">QIVerifyUS</option><option value="647446021">RecoRules</option><option value="647446082">Review</option><option value="647446042">Router</option><option
value="647446023">Validate</option><option value="647446081">Verify</option><option value="647446080">WebDEFileCreator</option></select></td>
</tr>
<tr>
<td>Select New Status:</td>
<td>
<select class="form-control" id="MA_status">
<option value="ready">Ready</option>
<option value="reject">Rejected</option>
<option value="hold">Held</option>
<option value="ready">Keep Status From Original Task</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">Notes:</td>
</tr>
<tr>
<td colspan="2">
<textarea name="MA_statusnote" class="form-control" id="MA_statusnote" maxlength="250" rows="5" cols="40"></textarea>
</td>
</tr>
<tr>
<td style="text-align: right;" colspan="2">
<input class="btn btn-default list-inline" id="btnSubmit" onclick="prepareData_MoveToAction();" type="button" value="Change">
<input class="btn btn-cancel" id="btnCancel" style="padding-left: 5px;" onclick=" dialogInstance2.close();" type="button" value="Cancel">
</td>
</tr>
</tbody></table>
<div id="overlayDialog" style="display: none;">
<div style="width: 100%; text-align: center;">
<h1>Processing...</h1>
<img src="Images/ajax-loader.gif">
</div>
</div>
<div id="dData_MoveToAction" style="display: none;" data-itemcount="24" data-oldactionidno="647446079" data-oldstatus="ready" data-oldactionname="FocusAudit" data-fnparent="PS"></div>
</div>
<script id="scrpd" language="text/javascript">

</script></div></div></div></div><div class="modal-footer" style="display: none;"><div class="bootstrap-dialog-footer"></div></div></div>
I agree the point the UI has to be active or else the script will have issue during the playback. In my scenario I have to work on that window. I have to perform action on it. Now when the window(div thing) comes up the page in the background goes disable
till the action is performed on the window or the window is closed. I have to perform action on it then only I can proceed with the TC automation. Please let me know any option to solve this problem.
Thanks
Ahetejazahmad Khan.

Single Page Web Design

Hi,
Would like to create a "Single Page Web Design" website.
My problem ist, how to create the diffrent parts of this website. What means the menus are "scrolling" from top to bottom of this single page (e.g. 1. Home page - then 2. Services, etc.) instead each time a new page is opening.
Thanks,
Donald

Hello,
You can use the "Anchors" option in Muse to create such website. Please refer to the video : http://tv.adobe.com/watch/muse-feature-tour/muse-create-anchor-links/
You would need to create a single page website and use a Manual menu option as shown in the screenshot :
Regards,
Sachin

Single page application and page load time

I'm trying to instrument a "single page application" with Application Insights but it seems that there is not way to provide manually the performance data (page load time) when invoking the logPageView() method.
The single page application has a "unique page" and all views are displayed using internal routing feature without refreshing the main page once it is loaded. So the logPageView() method is invoked multiple times: one of each displayed view.
It means that the built-in performance counter (netCon, ..., ptotal) based on window.performance.timing.* do not make sense for this type of application, that should be based on manual computation of the time needed to render each view.
Is there any method to provide manually this information using logPageView() or separate method ? If not, is there any idea to fully support in the future the single page application ?
Thanks in advance,
Maurizio

Hello Maurizio,
Do you still have the same issue with the latest
AI in Azure Portal?
There should be new API layer with the ability to submit custom properties and metrics. This might work well for you scenario. AI nugets are still in preview, please, use "Show Prerelease" in VS when adding those.
Dmitry Matveev

Is it wise to chage site design from multiple page to single page scrollable design for SEO?

I have a current site with multiple pages created in Muse. From watching some tutorials I am beginning to believe that converting the site to a one page scrollable format would be more applicable for table and mobile applications. My questions are these:
By adding anchor points and links to the stacked pages will this act the same as independent pages for SEO, or will I lose all of the current web traction I have earned and be starting over?
Is it commonly accepted that by converting to a one page format that it will be easier for search crawlers to rank my site?

Hi,
Single page websites can be great for new sites or for some special projects, but I won't recommend them as long-term solutions and, if you already have a multi-page website, I do not recommend switching to a single-page site.
If your single page site has great content and good structure, google might provide same treatment as it does for various sub pages website.
A useful Video by Matt Cutt, head of the webspam team at Google
Search engines will index all the pages of your website, providing multiple opportunities for your site to come up in searches. When your site consists of only one page, a single page is exactly what you’ll have indexed.
That means if you have many services, many products, single page design will really compromise your rank and result in search engine.
Do let me know if you have some more questions.

Solution Design questions/suggestions/help needed

Hi,
I would appreciate any inputs regarding this.
I am thinking of designing Solutions in Solman for our landscape which consists of ECC 6 and PI 7.1; each having a 3 system landscape D-Q-P. Is there an issue if I create Solutions Dev, QA and Prod vs Solutions ECC and PI ? I am more in favor of the former because it allows me easier management of the landscape when I implement System Monitoring, EWA, System Administration to see everything for the critical Prod systems together. Do any of you see any downsides to this approach ? Or any advantages of creating Solution ECC and Solution PI ?
Also, from what I read from the documentation, I would need to create logical component for each system (ZECCDEV,ZECCQA etc) for the systems to show up in the solution landscape ? This is because in the definition of logical components, there is only one field to add the Dev or QA or Prod systems ? I still have to start working on this, so I could be wrong. Please feel free to correct me.
Any inputs would be appreciated since I am fairly new to this.
Thanks,
Shreya

Hello,
I am not really sure what you are asking.
Systems are usually defined (SID) in SMSY, then they are added to a logical component.
Logicals need to be in the customer name space, so they are copied from SAP References to a unique name prefixed by a "Z".
Multiple systems of any system type (PRD, DEV, QAS, TEST, SANDBOX...etc) can be added to a logical component.
One or more logical can then be added to a Solution.
This is basically how the Solution is built. There are some limitations you need to consider when naming systems.
For certain functions, like EWA reports they need to have a unique Installation # + SID, and in the case of a long_sid, it would be the Installation # + (1st 3 chars of the)Long_SID.
So if you want to know if you can have a PI system called DEV, QAS and PRD and a ECC system called DEV, QAS and PRD, you can. But if you name them ECC_DEV, ECC_QAS, and ECC_PRD, then you will have problems.
A logical name must be unique. But they show up in the system landscape as soon as they have been defined.
When the logical is added to the Solution, only system Types of Production are automatically set to "Put in Solution"
Even though you can see the systems of other types in the logical and in the solution. And any system that is not in status "Put in Solution" will not be visible when you try to use it, as an example create an EWA , you would select the solution and not see any other type but production systems to select. This is because system types that are not production need to be manually set to "Put in Solution". This is done in the solution, in Change/Edit mode, and right clicking on the system you want to put in the solution and selecting that option, then saving.
From your questions am and not exactly sure what you were getting at, but I do hope this general info helps.
Regards,
Paul

Design approach suggestion

Hello Experts,
Here is the scenario -
I have an oracle database from which I need to fetch the data through record adapter(SQL pass through). The data is from different tables which are "unrelated" to each other. There are in all 8 such unrelated tables.
Now the approaches that come to my mind -
Approach 1: Create 8 different applications and fetch respective tables. Run ITL over it and push the indexed data to the same Dgraph.
Risk : 1Running multiple applications on the same dgraph at the same time. But this could be mitigated by the processes followed.
Risk : Manageability
Any other risk you see?
Approach 2 :Create 1 application with 8 record adapters and finally join all on the basis of a unique identifier column.
Any risk or challenges do you foresee in this?
If you have any other ideal approach , please share!
Thanks!

Hello Kristen,
Thanks for a quick reply!
Yes, creating 8 applications doesnt seems a good idea and I am more focussing on the second approach -
"Create a pipeline with 8 record adapters that fetch the data from tables and then I will do a switch join and provide it to mapper"
Do you foresee any issues in the above approach?
I am less familiar with how CAS works at the moment. Can you please guide me to the correct document or just brief the approach you suggested.
Thanks a ton for your reply!

CS5- Can't print single pages in tiled file- please help?!?

When I go to print a document I no longer have the option to choose a range of pages to print in my tiled files. The "All" option is selected and the "range" opion will not select. I'm not doing anything different than what I did with CS3. Using Creative Suite with Window's 7.
Please help!
Thanks

Sometimes it seems like they have made this very hard when they actually made this easier for you.
It is right in front of you but because you are not expecting it to be there you don't see it.
Screen Tile>Tile Range that simple!
It numbers your tiles for you nicely and doesn't give you odd shape tiles.What do you think of this new feature?

824pp document to pdf as single pages

Hello
I am after some help if possible. We are producing a catalogue that is 824 pages in length. We do not have 1 document with 824 pages, we have split it into smaller sizes. However, we are using on online proofing system and have been asked if we can upload our high res pdf's as single page documents. This will help speed up the proofing and will make ftp transfer of the files a lot easier. Is there a way to take a multi page document and export it as a high res pdf to PDFX1A standard as single pages. For example, if one section is 32 pages we need to export it as 32 separate pdf's.
Thanks in anticipation
Gary

Here's something I've posted this AS before and it works for me in CS2. Put the document you wish to make single pages of in its own folder, open the document then run the attached script. PDF files will be placed in folder that the document's in. Good luck. I can't claim ownership for this script. I picked it up from another forum or thread.
tell application "Adobe InDesign CS2"
set allPresets to name of every PDF export preset
set thePreset to choose from list allPresets
if thePreset = false then
beep
error number -128
else
set the thePreset to item 1 of thePreset
end if
try
set thepath to (full name of document 1) as string
on error
set theDesk to path to desktop as string
set thepath to theDesk & (name of document 1) as string
end try
if thepath ends with ".indd" then
set thepath to text 1 thru -6 of thepath
end if
set pageCount to pages per document of document preferences of document 1
repeat with i from 1 to pageCount
set page range of PDF export preferences to i as string
export document 1 to file (thepath & "-" & i & ".pdf") format PDF type using PDF export preset thePreset without showing options
end repeat
beep
display dialog "Finshed." buttons {"OK"} default button 1
end tell

Report Output in a single page,

I have a report which is registered in apps, the ouput is around 20 pages,
now my question is, is there any options to get the ouput in a single page with out any pagebreaks.
help needed urgent
thanks in advance

Hi,
I was facing problem like this, I checked the style which I was using currently for the report, by default it was having 66 lines per page, you do one thing create one new style and place the maximum no of lines per page you like means 1000 etc. and attach this style also to any printer or noprint then run the report, this may solve your problem.
Thanks
Shishu Paul-Mumbai

Can i display My application iview and transaction iview in single page ?

Hi,
I am new in web dynpro and portal. i am doing one approval application through web dynpro. Now i need to attache sap inbox to application. For that some budy suggested me about transaction view. So my questions are as folloes.
1.> How i attached my application to iview ?
2.> How i created Transaction iview ?
3.> Can i attache my application iview with transaction iview if it is possible then how ?
4.> Can i display My application iview and transaction iview in single page ?
Please guide me in this procesure.
Regards,
Gurprit Bhatia

Hi Gurprit,
1.> How i attached my application to iview ?
       You can attach your application to web Dynpro IView, for this login into portal, in the Content Management tab right click on a folder, then New --> IView. Select WD java Application. Select your application and create an Iview.
2.> How i created Transaction iview ?
       Similarly, instead of selecting WD java Application, select iView template, you will get a list of available templates, and in this you will find template for Transaction Iview, in this template define the Tx for which you want to create the template.
3.> Can i attache my application iview with transaction iview if it is possible then how ?
      No, I dont think you can attach your application to transaction Iview. but, you can attach both IViews on single page.
4.> Can i display My application iview and transaction iview in single page ?
      Yes, you can attach both IViews on single page. Again in Content Management tab, crate a PAGE; Then right click on created IViews and select add IView to Page ßß: Delta Link.
Hope this helps.
Regards,
Amit

How to layout beans for single page design

Hey guys. I'm designing a site that uses the Icefaces framework. I've been reading a book called Real World Java EE patterns. I'm kind of confused how to layout the pages. Normally I would have just a POJO class implement serializable for a bean. This bean would then back each page. With a single page design I'm going to have a bunch of elements on the page. Datatables, trees, inputs, calendars etc. Is it normal or best practice to have separate beans for each datatable, calendar, etc or put that all in one bean? I'm not sure how to approach this. Right now each element is a bean and I'm using the @Inject annotation to have the data table talk to the tree and vise versa. This creates really bad code and if I put this as a member of the class I will get a circular reference because the data table bean has to inject the calendar and the calendar has to inject the data table.
Thanks for any help.

'best' practice is to not follow blindly what other people say, but to reason yourself what works best for you. It has been stated many times before and I will state it again: best practice does not exist. Only personal opinions about what is best exist. Personal opinions are not facts.
So choose what works for you. Is the code easy to maintain? Is it readable? Can you perhaps re-use parts of it? Then I'd say you have a winner.
I'll give you my personal favorite. When working with a page that has input elements, I tend to have two or three beans. Replace XXX with a logical and context sensitive name.
XXXForm - this is a simple request scoped bean that has the action and event methods and will hold some data for reading purposes for the view, possibly taken from a database.
XXXStorage - this is a session scoped bean that holds information from the form; if it is an editing function I initialize it with the current state first. Storing this stuff in a session bean makes it very easy to do Ajax stuff and create input cycles that span multiple requests. Also when data is split in multiple pages, the storage class is the one to remember which page is being displayed.
Optionally, I also have an XXXSearch object, which is a session scoped bean that stores search/sort/filter parameters. I make this session scoped so the information is remembered for the duration of the user's visit, meaning he can navigate away from the page in question, come back and all his choices will still be in place.
So no, I don't have beans specifically for each component, although I might make simple POJOs to hold information gathered from several sources (for example, information gathered from several database tables). These beans are generally used to fill the rows of a datatable and are just created from within the form class, for example in a @PostConstruct annotated method.

Do I need to design on just one page for a scrolling "single page design?

Hi I want to design a single page scrolling website but I have quite a bit of content. In Adobe Muse tutorials such as this one: http://tv.adobe.com/watch/muse-feature-tour/adobe-muse-layers-panel-may-2013/ it looked like she was designing multiple pages but the preview shows it functioning as one long page. I understand how to use anchors and pins but do I have to design my whole website on one long page or am I able to design seperate pages and "stack them" if you will?

I am not a complete expert on this, but I have been using Muse since Day 1 and I believe that you do need to create the site on a single page if you want it to scroll with pins and anchors.
It is possible to create an anchor on a separate page, but would not have the scrolling effect that you describe. It looks more like you're just loading a second page.
Hope this helps!

Bex Web Application Designer launched from desktop NOT SSO (single sign-on)

NW 2004s
BI 7.0
The SSO from the Portal to BI/BW is working correctly, The SSO from BI/BW to the POrtal is working correctly.
The problem is from the desktop, launching Bex Web Application DEsigner, it prompts to Logon to the BI system, then when you execute the selection it prompts you to log on to the Portal. I would expect the Portal logon to be SSO. Is there an SSO option for the Bex WAD I need ?
Is there a Bex tool or desktop configuration that I need to implement?
Thanks in advance for any help
Sarah

Hello Sarah,
Please refer this SSO SAP Pages
http://help.sap.com/saphelp_nw04s/helpdata/en/12/9f244183bb8639e10000000a1550b0/content.htm
For Portals
http://help.sap.com/saphelp_nw04s/helpdata/en/89/6eb8deaf2f11d5993700508b6b8b11/content.htm
You can also refer this forum
/thread/342517 [original link is broken]
Hope it helps
Thanks
Chandran
Edited by: Chandran Ganesan on Feb 6, 2008 8:26 PM

Design approach for custom Fiori application

Dear Experts,
Good day to all...!
I am having a query on finalizing design approach for one of my custom Fiori Application development using SAP UI5.
Current Application design and Features:
As now we are having application, which is been used in laptops. The application structure is like (SAP R3 --> SUP -->UI (using .net) [back-end à Middlewareà UI).
The UI is hosted on IIS server and the application type is desktop, so the users can use the application in offline as well.
Once its connected to internet, they push all the data back to SAP via SUP.
Proposal :
We are planning to migrate the same application into Fiori with same offline features and extending to mobiles and devices.
I have few queries here.
What will be the best approach to deploy the application either SUP(Latest version of SMP) or SAP R3.
If SAP R3 to deploy App:
If we choose to deploy the application in R3, How to support the offline usage mobile and devices.
Will the HTML5 local storage or indexed DB’s are sufficient to support the offline usage.
In this case, Shall we drop the SUP/SMP, Since the application directly accessed from SAP R3 ..?
SUP/SMP to deploy the app:
In this case, I need to create (wrap the ui5 files into hybrid application) a hybrid application to support the mobile and devises as native application..? Correct me If I am wrong..:)
Hope I can use the SUP/SMP local storage options to support my offline usage..? Correct me If I am wrong..:)
What will be the best option to support desktop offline usage.
We are yet to take a decision on this.. Please provide your valuable inputs , which will help us to take some decisions.
Thanks & Regards
Rabin D

Hi Anusha,
considering the reusability aspect the components approach is the much better one (see also the best practices dev guide chapter regarding components SAPUI5 SDK - Demo Kit).
It allows you to reuse that component in different applications or other UI components.
I also think that the Application.js approch will not work with Fiori, cause the Fiori Launchpad loads the Components.js of the Fiori app in an Component Container.
Best Regards, Florian

Single Page Application Design Approach Suggestion/Help

Similar Messages

Maybe you are looking for