I am designing a system in Share Point via Share Point Designer. We have a form in my Share Point site. Users have to fill some fields in the form and send it to the approval committee. We cannot upload anything to the servers. The design is site based. Our problems are:
1- I want to add small (?) icons for the descriptions of that field. When the user click on the (?) icon for "brief description" field a pop-up or another window will be opened and perhaps it will say:
Enter a description of the requested thing.
Be as specific as possible.
2- I want to change the font colors of the fields in the form. The share point brings them black as default. Such as I want to see the "Brief description:" and "Status:" as purple instead of black.
Brief description: .....
Status: .....
3- I want to add an agreement pop-up to the new form which will be open just after clicking "send" button in the form. The pop up will say: "Are you sure that you read the procedure" . The user has to click "Yes" to continue sending the form. Otherwise It will return to previous screen again.
Use jQuery. You can upload the scripts to a document library and do pretty much whatever you want to the html after it is rendered by SharePoint.
For making changes from a custom form, JSAPI may be useful. Alternatively you can hide a regular form and manipulate it with a popup.
Related
Let's say there's two buttons on a homepage that both link to the same page. Is there a way to exclusively show a certain part of the page if you click on one button and show a different part if you click the other button?
If this is not an option, would it be possible to store the information of which button is clicked to get to the page?
I'm really quite in the dark on this and barely know how to formulate the questions i am asking, so finding an answer on google is quite difficult. Thanks in advance for any help.
Yes,sure. Just add different parameter to the link on the buttons e.g. page.html?type=1, page.html?type=2. On the target page read the value of the parameter and modify the page accordingly.
I have created a webpage using Backbone.js and Marionette.js that mostly consists of a bootstrap accordion view that displays a list of items when the accordion header is clicked. Each item can also be clicked, which will show a hidden div of detailed information that pertains to that particular item.
I would like to make this site accessible to people who might not be using a mouse (Maybe they're visually impaired and using a screen reader? Maybe they just don't like clicking things? Either way.) I'm thinking that this would mean being able to press the Tab key to get to the accordion, pressing Space or Enter to open the accordion, Tabbing down (or down arrow key?) through the list items, and then using Space or Enter to show the selected item's hidden div.
I'm finding it difficult to find information on how to add a feature like this, since searches like "How to make an accessible website that can be used without a mouse" mostly turns up blogs on what a developer should do to add accessibility to a page, and not much on how to do it.
Currently, the page doesn't really respond to any keyboard buttons. Any tips or resources you could share would be extremely appreciated. I've been fiddling with ARIA role tags, but I'm either not doing it right or it's not the answer here.
You have to use tabindex
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.tabIndex
Screen readers automatically read whatever element is the activeElement
I've been doing searches trying to find help on this, but so far all I have found is how to set options for popping up a SharePoint modal dialog box from custom code.
However, I haven't created any custom web parts to display modal dialogs. What's happening, is if someone clicks the upload document button in a library, the upload document modal dialog comes up, but the ok and cancel buttons are half off of the bottom of the box. Users can click on them, but it just doesn't look very good.
I started playing with the CSS to make the modal dialog box bigger to reveal the buttons, and that works for the most part, but the real problem is the grant user permission dialog box.
When that is clicked, it doesn't show the ok and cancel buttons, and maximizing the dialog box doesn't reveal them. The user has to hit tab about 5-10 times before the focus moves to the ok button and is then clickable.
I would post an image, but I don't have enough reputation to do so.
Has anyone come across this? It seems very strange that the out of the box setting would have this problem.
The CSS that I use to adjust the height and width of the modal dialog is:
.ms-dlgFrame, .ms-dlgContent, .ms-dlgBorder, .ms-dlgFrameContainer
I'm just trying to set the height/min-height values, but I haven't had much luck.
We're using Internet Explorer 11 to view the pages.
Stevangelista actually pointed me in the right direction, I wish I could mark comments as answers, and since I'm new I can't upvote the comment, but here's the solution:
I am using a customized master page, and that comment had me take a look at the elements in the page.
Since the master page is being used in the dialog boxes as well, I used the s4-notdlg class to remove parts that weren't needed in the dialogs. Those parts were pushing the buttons below the bottom of the screen.
I'm not a css expert, so there may be ways of keeping those parts and still have the buttons accessible, but the particular issue I was trying to fix was resolved by using the s4-notdlg class to objects in my custom master page.
I'm trying to understand InstallShield (2009)/InstallScript on the fly, because I'm modifying someone else's installation script.
One of the dialogs during the installation procedure previously had one textbox on it, asking for a SQL Server instance, assuming a certain database name. Now I've just completed an enhancement enabling you to choose any database name, not just the default, and I need to add a field to this dialog so the user can input the chosen DB name. Monkey see, monkey do, just make a new control and duplicate and adapt whatever functionality the form had for the first textbox - easy enough, right?
Umm... problem here. It seems that the "SdShowDlgEdit1" form is a generic thing that gets shipped with InstallShield, and is used all over, wherever you have a dialog that needs one textbox. Change that form, and it changes everywhere that it's called... so now I have a spurious 2nd textbox appearing all over my installation wherever there was a single text box before.
Oops. Undo changes, and change the reference to "SdShowDlgEdit2", which is - you guessed it - InstallShield's standard form for dialogs needing 2 textboxes. Now that would be great.... excepting that the previous developer got there before me and added a "browse" button to that form for a place where he needed the 2nd text box to contain a folder path. I don't want that "browse" button, and I can't delete it.
So I think, why don't I create a custom form of my own, and not get under anyone else's toes? So I clone the form, rename the new instance to "EnterDbDetails", delete the "Browse" button and make the form look just right.
Then I go back into the InstallScript to redirect to "EnterDbDetails" and discover that the EzDefineDialog function requires me to pass in the "Resource ID" of the form. Now what was it again... 12018... great... fill in all necessary details, compile, build, and give it a whirl. Looks lovely, all the right default values are filled into the two text boxes - but hey! Why is the browse button there? And why is the text on the labels not what I set?
Back to InstallScript, check the Resource ID - turns out that the original "SdShowDlgEdit2" also has a Resource ID of 12018. Well, that explains that nicely. Silly that InstallShield allows you to have two forms with the same ID, but whatever... So let's go back to my "EnterDbDetails" form and change the ID...
... but the Resource Identifier property is read-only! WTF?
So now I can't use any of the standard forms, and I can't use a custom form because it won't let me change the resource ID.
I am stumped. Can anyone please explain how you are supposed to do something like this, which really ought to be the simplest thing in the world?
Creating New Custom Dialogs in InstallScript and InstallScript MSI Projects
Quote from the site (2015 edition) :
To create a custom dialog, you need to perform the following general steps:
Use the New Dialog Wizard to add a new custom dialog to your project. For more information, see Using the New Dialog Wizard to Add a New Custom Dialog to an InstallScript or InstallScript MSI Project.
Add controls to the dialog. For more information, see Adding a Control to a Dialog in an InstallScript or InstallScript MSI Project.
Create a script function that loads the dialog into memory, displays it on the screen, handles the end user’s interaction with the dialog’s controls, and closes the dialog when the user is finished with it. For more information, see Using InstallScript to Implement Custom Dialogs.
To create a new dialog:
Open the Dialogs view. The Dialogs view is located in the User Interface section of the View List.
Right-click the All Dialogs explorer and then click New Dialog. The Dialog Wizard opens. Click Next to dismiss the Welcome panel.
In the Dialog Template panel, click Interior Wizard Panel, and select the Let me insert this dialog in a User Interface sequence check box.
In the User Interface panel, select Installation in the User Interface Sequence list. In the list of dialogs, select InstallWelcome. Based on these selections, InstallShield will insert your new dialog in sequence immediately following the InstallWelcome dialog.
In the Dialog Position and Condition panel, leave the default settings, and click Finish. Your new dialog appears in the Dialogs list.
Right-click the dialog and select Rename. Rename the dialog WelcomeBitmap.
Using the same technique, you can insert additional dialogs in your installation’s user interface.
In this step, you will modify the WelcomeBitmap dialog that you just created:
First, create a bitmap (using a program like Microsoft Paint) that measures 300 by 150.
Open the Dialogs view.
Expand the WelcomeBitmap dialog’s node. Click English (United States) to open the Dialog Editor.
Click the Dialog Bold Title text box at the top of the dialog. In the Text field, type Welcome Bitmap. This changes the dialog’s main title.
Click the Dialog Normal Description text box at the top of the dialog. In the Text field, type Displays my welcome bitmap. This changes the dialog’s description.
Click the Bitmap button on the Dialog Control toolbar and use the cursor to drag a box on the dialog. Set the Height to 150 and the Width to 300.
In the File field browse to the bitmap file that you created in step 1.
After rebuilding the project (by pressing F7) and running it (by pressing CTRL+F5), the Welcome Bitmap dialog will appear after the Install Welcome dialog.
You need to edit the ResourceID (to something unique) in the Dialog table which is found in the Direct Editor under Additional Tools section in the Installation Designer.
By custimizing standard InstallShield dialogs, like sdWelcome, sdFinish and sdFinishReboot you will be able to use the dialogs default script APIs with the performed customization's
I would like to collect your ideas on the following:
SharePoint 2010 (and 2007) does have a preview button... while you are editing a publishing page you can switch to the "Page" tab and hit the Preview button:
Clicking this button does some magic to save your data, and opens a new window where the preview page is displayed. Nice, but could be better. What I would like is live update on editing of field controls from the edit page on the preview page.
My thoughts on this is are as follows:
Field types have an ID. For rendering the field values on your preview page, subclass from the standard FieldValue control, and render a span with the same ID around the field value html. So if we have the text ABC in the content editable div of a RichTextFiled X, render the field value as ABC in the display output (for example using EditModePanels for Display and Edit)
Add key-stroke event handler on all fields for the edit mode page (using for example jQuery), on key press copy contents from edit browser window to preview browser window
Transfer can be done using http://www.sfpeter.com/2008/03/13/communication-between-browser-windows-with-jquery-my-new-plugin/.
Does this sound doable? Would be great to work dual monitor, edit on one monitor, preview page in its real rendering on the other monitor. Especially if the edit mode differs from the display mode.
Looking forward to your input!
I will answer my own question. It is not as easy as its sounds. Fields can use things like reusable content and render patterns. These features render at server side, and change the output. This would require postbacks, which renders the whole thing useless. Lets stay with the already available preview button.