SPFx ਵਿੱਚ ਕਸਟਮ ਪੌਪਅੱਪ ਲਿੰਕਸ ਦੇ ਨਾਲ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਵਧਾਉਣਾ
ਆਧੁਨਿਕ ਸ਼ੇਅਰਪੁਆਇੰਟ ਵਿਕਾਸ ਵਿੱਚ, ਸੰਰਚਨਾਯੋਗ ਖੋਜ ਨਤੀਜੇ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ PnP ਮਾਡਰਨ ਖੋਜ ਵੈੱਬਪਾਰਟ (SPFx) ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਸੁਧਾਰ ਹੋ ਸਕਦਾ ਹੈ। ਲਿੰਕ ਕਿਵੇਂ ਖੁੱਲ੍ਹਦੇ ਹਨ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨਾ ਡਿਵੈਲਪਰਾਂ ਵਿੱਚ ਇੱਕ ਪ੍ਰਸਿੱਧ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਖਾਸ ਤੌਰ 'ਤੇ "ਵਿਸਤ੍ਰਿਤ ਸੂਚੀ" ਲੇਆਉਟ ਦੇ ਨਾਲ। ਆਮ ਤੌਰ 'ਤੇ, ਲਿੰਕ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੁੱਲ੍ਹਦੇ ਹਨ, ਪਰ ਜੇਕਰ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਤਾਂ ਕੀ ਹੋਵੇਗਾ?
ਇਸ ਪੋਸਟ ਵਿੱਚ, ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ PnP ਮਾਡਰਨ ਖੋਜ ਵੈਬਪਾਰਟ ਦੇ ਲਿੰਕ ਵਿਵਹਾਰ ਨੂੰ ਬਦਲ ਕੇ ਇਸ ਕਾਰਜਸ਼ੀਲਤਾ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਨਾ ਹੈ। ਖੋਜ ਨਤੀਜਿਆਂ ਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਣ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਦਿਖਾਵਾਂਗੇ ਕਿ ਲਿੰਕ ਨੂੰ ਇੱਕ ਅਨੁਕੂਲਿਤ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹਣ ਲਈ ਕਿਵੇਂ ਮਜਬੂਰ ਕਰਨਾ ਹੈ, ਜਿਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਇੱਕ ਵਧੇਰੇ ਏਕੀਕ੍ਰਿਤ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਹੁੰਦਾ ਹੈ।
ਚੁਣੌਤੀ ਉਦੋਂ ਪੈਦਾ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਫਾਰਮੂਲਾ ਵਰਤਦੇ ਹੋ ਜਿਵੇਂ ``, ਜੋ ਇੱਕ ਨਵੀਂ ਟੈਬ ਲਈ ਡਿਫੌਲਟ ਹੁੰਦਾ ਹੈ। ਹਾਲਾਂਕਿ, JavaScript ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਅਸੀਂ ਇਸ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਲਿੰਕ ਨੂੰ ਇੱਕ ਨਿਯੰਤਰਿਤ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਸੇ ਬ੍ਰਾਊਜ਼ਿੰਗ ਸੈਸ਼ਨ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਵਿੱਚ ਵਧੇਰੇ ਲਚਕਤਾ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
ਵਿਸਤ੍ਰਿਤ ਸੂਚੀ ਲੇਆਉਟ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਲਈ JavaScript ਅਤੇ SPFx ਦੀ ਵਰਤੋਂ 'ਤੇ ਧਿਆਨ ਕੇਂਦ੍ਰਤ ਕਰਦੇ ਹੋਏ, ਅਸੀਂ ਤੁਹਾਨੂੰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਵਿਕਸਤ ਕਰਨ ਲਈ ਲੋੜੀਂਦੇ ਕਦਮਾਂ ਬਾਰੇ ਦੱਸਾਂਗੇ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਤੁਹਾਡੀ ਸ਼ੇਅਰਪੁਆਇੰਟ ਸਾਈਟ ਨਿਰਵਿਘਨ ਅਤੇ ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਹੈ, ਅਸੀਂ ਹੱਲ ਦੁਆਰਾ ਚੱਲਦੇ ਹੋਏ ਜੁੜੇ ਰਹੋ।
| ਹੁਕਮ | ਵਰਤੋਂ ਦੀ ਉਦਾਹਰਨ |
|---|---|
| window.open() | ਇਹ ਕਮਾਂਡ ਇੱਕ ਨਵੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਜਾਂ ਟੈਬ ਖੋਲ੍ਹੇਗੀ। ਇਹ ਵਿਧੀ ਕੁਝ ਮਾਪਾਂ ਅਤੇ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ, ਜਿਵੇਂ ਕਿ ਚੌੜਾਈ, ਉਚਾਈ ਅਤੇ ਸਕ੍ਰੋਲਬਾਰਾਂ ਨਾਲ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਖੋਲ੍ਹਦੀ ਹੈ। |
| event.preventDefault() | ਕਲਿਕ ਕੀਤੇ ਲਿੰਕ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਰੋਕਦਾ ਹੈ, ਜੋ ਕਿ ਉਸੇ ਜਾਂ ਨਵੀਂ ਟੈਬ ਵਿੱਚ URL ਨੂੰ ਖੋਲ੍ਹਣਾ ਹੈ। ਇਹ ਸਾਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ ਕਿ ਲਿੰਕ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇਸਦੀ ਬਜਾਏ ਇੱਕ ਪੌਪਅੱਪ ਖੋਲ੍ਹਣਾ। |
| querySelectorAll() | ਡੇਟਾ-ਪੌਪਅੱਪ ਵਿਸ਼ੇਸ਼ਤਾ ਸਾਰੇ ਐਂਕਰ ਤੱਤ ਚੁਣਦੀ ਹੈ (). ਇਹ ਵਿਧੀ ਇੱਕ ਨੋਡਲਿਸਟ ਵਾਪਸ ਕਰਦੀ ਹੈ, ਜੋ ਸਾਨੂੰ ਇਵੈਂਟ ਸੁਣਨ ਵਾਲਿਆਂ ਨੂੰ ਇੱਕੋ ਸਮੇਂ ਕਈ ਹਿੱਸਿਆਂ ਵਿੱਚ ਲਾਗੂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ। |
| forEach() | querySelectorAll() ਦੁਆਰਾ ਤਿਆਰ ਕੀਤੀ NodeList ਵਿੱਚ ਹਰੇਕ ਐਂਟਰੀ ਇੱਕ ਐਕਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰਦੀ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਜੋੜਨਾ)। ਇਹ PnP ਆਧੁਨਿਕ ਖੋਜ ਵਿੱਚ ਬਹੁਤ ਸਾਰੇ ਗਤੀਸ਼ੀਲ ਲਿੰਕ ਤੱਤਾਂ ਦੇ ਪ੍ਰਬੰਧਨ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ। |
| addEventListener() | ਇਹ ਤਕਨੀਕ ਓਪਨਇਨਪੌਪਅੱਪ() ਫੰਕਸ਼ਨ ਨੂੰ ਚਾਲੂ ਕਰਨ ਵਾਲੇ ਹਰੇਕ ਲਿੰਕ ਵਿੱਚ ਇੱਕ ਕਲਿੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਜੋੜਦੀ ਹੈ। ਇਹ ਡਿਫੌਲਟ ਕਲਿਕ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। |
| import { override } | ਇਹ ਸਜਾਵਟ ਸ਼ੇਅਰਪੁਆਇੰਟ ਫਰੇਮਵਰਕ (SPFx) ਦਾ ਹਿੱਸਾ ਹੈ ਅਤੇ SPFx ਵੈਬਪਾਰਟਸ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਖਾਸ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਲਈ ਸਮਰੱਥ ਬਣਾਉਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਪੌਪਅੱਪ ਕਾਰਜਕੁਸ਼ਲਤਾ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨਾ। |
| @override | SPFx ਵਿੱਚ, ਇੱਕ ਸਜਾਵਟ ਵਾਲਾ ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਇੱਕ ਵਿਧੀ ਜਾਂ ਸੰਪੱਤੀ ਕਾਰਜਕੁਸ਼ਲਤਾ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਦੀ ਹੈ। SharePoint ਭਾਗਾਂ ਦੇ ਵਿਹਾਰ ਨੂੰ ਸੋਧਣ ਵੇਲੇ ਇਹ ਜ਼ਰੂਰੀ ਹੈ। |
| spyOn() | ਜੈਸਮੀਨ ਨਾਲ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਦੌਰਾਨ ਫੰਕਸ਼ਨ ਕਾਲਾਂ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦਾ ਹੈ। ਇਸ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ window.open() ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਗਾਰੰਟੀ ਦਿੱਤੀ ਜਾ ਸਕੇ ਕਿ ਟੈਸਟਿੰਗ ਦੌਰਾਨ ਪੌਪਅੱਪ ਸਹੀ ਢੰਗ ਨਾਲ ਲਾਂਚ ਕੀਤਾ ਗਿਆ ਹੈ। |
| expect() | ਇਹ ਕਮਾਂਡ ਜੈਸਮੀਨ ਵਿੱਚ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਜਾਂਚ ਕਰਦਾ ਹੈ ਕਿ window.open() ਨੂੰ ਸਹੀ ਆਰਗੂਮੈਂਟਾਂ ਨਾਲ ਬੁਲਾਇਆ ਗਿਆ ਸੀ, ਇਹ ਗਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਪੌਪਅੱਪ ਲੋੜੀਂਦੀ ਸੈਟਿੰਗ ਨਾਲ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ। |
SPFx ਵਿੱਚ ਪੌਪਅੱਪ ਵਿੰਡੋ ਹੱਲ ਨੂੰ ਸਮਝਣਾ
ਉੱਪਰ ਸੂਚੀਬੱਧ ਸਕ੍ਰਿਪਟਾਂ ਇੱਕ PnP ਮਾਡਰਨ ਖੋਜ ਵੈੱਬਪਾਰਟ (SPFx) ਦੇ ਅੰਦਰ ਲਿੰਕਾਂ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਵਿਵਸਥਿਤ ਕਰਦੀਆਂ ਹਨ। ਮੂਲ ਰੂਪ ਵਿੱਚ, ਲਿੰਕਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ target="_blank" ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਣ ਲਈ ਟੈਗ ਕਰੋ। ਹਾਲਾਂਕਿ, ਇੱਥੇ ਉਦੇਸ਼ ਇਹਨਾਂ ਲਿੰਕਾਂ ਨੂੰ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹਣਾ ਹੈ, ਜਿਸ ਨਾਲ ਉਪਭੋਗਤਾਵਾਂ ਦੀ ਆਪਸੀ ਤਾਲਮੇਲ ਵਧਦੀ ਹੈ। ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ, ਅਸੀਂ ਵਰਤਿਆ window.open() ਫੰਕਸ਼ਨ, ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇੱਕ ਨਵੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਜਾਂ ਪੌਪਅੱਪ ਵਿੱਚ URL ਖੋਲ੍ਹਣ ਦਿੰਦਾ ਹੈ। ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਖਾਸ ਮਾਪਦੰਡਾਂ ਨਾਲ ਐਡਜਸਟ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਚੌੜਾਈ, ਉਚਾਈ, ਅਤੇ ਹੋਰ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਜਿਵੇਂ ਕਿ ਸਕ੍ਰੌਲਬਾਰ ਜਾਂ ਮੁੜ ਆਕਾਰ ਦੇਣਯੋਗਤਾ), ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਪੋਪਅੱਪ ਇਰਾਦੇ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦਾ ਹੈ।
ਐਂਕਰ ਟੈਗਸ ਦੇ ਡਿਫੌਲਟ ਕਲਿਕ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਾ ਪਹੁੰਚ ਦਾ ਇੱਕ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ ਹੈ। ਇਸ ਨਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ event.preventDefault(), ਜੋ ਲਿੰਕ ਨੂੰ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੁੱਲ੍ਹਣ ਤੋਂ ਰੋਕਦਾ ਹੈ। ਇਸਦੀ ਬਜਾਏ, ਅਸੀਂ ਲਿੰਕ ਨਾਲ ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਨੂੰ ਜੋੜਦੇ ਹਾਂ, ਜੋ ਇੱਕ ਕਸਟਮ ਫੰਕਸ਼ਨ ਨੂੰ ਸਰਗਰਮ ਕਰਦਾ ਹੈ (ਇਸ ਕੇਸ ਵਿੱਚ, OpenInPopup()) ਜੋ ਕਲਿੱਕ ਇਵੈਂਟ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ ਅਤੇ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ URL ਨੂੰ ਖੋਲ੍ਹਦਾ ਹੈ। ਇਹ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਲਿੰਕ ਦੇ ਵਿਵਹਾਰ 'ਤੇ ਵਧੇਰੇ ਨਿਯੰਤਰਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਅਤੇ PnP ਮਾਡਰਨ ਖੋਜ ਵੈਬਪਾਰਟ ਦੇ ਅੰਦਰ ਵਧੇਰੇ ਇਕਸਾਰ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਦੇ ਨਤੀਜੇ ਵਜੋਂ।
ਫਰੰਟ-ਐਂਡ ਵਿਵਹਾਰ ਨਾਲ ਨਜਿੱਠਣ ਤੋਂ ਇਲਾਵਾ, ਅਸੀਂ SPFx ਦੇ ਬਿਲਟ-ਇਨ ਸਜਾਵਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੈਕਐਂਡ ਪਹੁੰਚ ਦੀ ਵੀ ਜਾਂਚ ਕੀਤੀ ਜਿਵੇਂ ਕਿ @ਓਵਰਰਾਈਡ. ਇਹ ਪਹੁੰਚ ਖੋਜ ਨਤੀਜਿਆਂ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਹੋਰ ਸੰਸ਼ੋਧਿਤ ਕਰਦੇ ਹੋਏ, ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਕਸਟਮ ਵੈਬਪਾਰਟਸ ਵਿੱਚ ਸਿੱਧਾ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਪਾਉਣ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ। SPFx ਵਿੱਚ ਰੈਂਡਰਿੰਗ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਨਾਲ ਸਾਨੂੰ JavaScript ਕੋਡ ਇੰਜੈਕਟ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਮਿਲਦੀ ਹੈ ਜੋ ਲਿੰਕ ਕਲਿੱਕਾਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ ਅਤੇ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਲੋੜੀਂਦੀ ਸਮੱਗਰੀ ਨੂੰ ਖੋਲ੍ਹਦਾ ਹੈ। ਇਹ ਤਕਨੀਕ ਸ਼ੇਅਰਪੁਆਇੰਟ ਵਾਤਾਵਰਨ ਦੇ ਕਈ ਖੇਤਰਾਂ ਵਿੱਚ ਹੱਲ ਨੂੰ ਵਧੇਰੇ ਮਾਡਿਊਲਰ ਅਤੇ ਮੁੜ ਵਰਤੋਂ ਯੋਗ ਬਣਾਉਂਦੀ ਹੈ, ਇਸਲਈ ਰੱਖ-ਰਖਾਅ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
ਇਕਾਈ ਟੈਸਟਿੰਗ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਕਿ ਪੌਪਅੱਪ ਵਿਸ਼ੇਸ਼ਤਾ ਕਈ ਵਾਤਾਵਰਣਾਂ ਅਤੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਸਹੀ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਦੀ ਹੈ। ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ spyOn() ਇੱਕ ਜੈਸਮੀਨ ਟੈਸਟਿੰਗ ਫਰੇਮਵਰਕ ਵਿੱਚ ਪ੍ਰਮਾਣਿਤ ਕਰਦਾ ਹੈ ਕਿ window.open() ਵਿਧੀ ਨੂੰ ਸਹੀ ਆਰਗੂਮੈਂਟਸ ਨਾਲ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਟੈਸਟਿੰਗ ਦਾ ਇਹ ਰੂਪ ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਦੇ ਸ਼ੁਰੂ ਵਿੱਚ ਸੰਭਾਵੀ ਮੁੱਦਿਆਂ ਦੀ ਪਛਾਣ ਕਰਦਾ ਹੈ ਅਤੇ ਗਾਰੰਟੀ ਦਿੰਦਾ ਹੈ ਕਿ ਪੌਪਅੱਪ ਵਿੰਡੋਜ਼ ਯੋਜਨਾ ਅਨੁਸਾਰ ਕੰਮ ਕਰਦੇ ਹਨ। ਇਹ ਹੱਲ SharePoint ਦੇ PnP ਮਾਡਰਨ ਖੋਜ ਵੈਬਪਾਰਟ ਵਿੱਚ ਫਰੰਟ-ਐਂਡ ਈਵੈਂਟ ਹੈਂਡਲਿੰਗ, ਬੈਕਐਂਡ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ, ਅਤੇ ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਕੇ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਮਜ਼ਬੂਤ ਕਰਦਾ ਹੈ।
ਹੱਲ 1: ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਬਣਾਉਣ ਲਈ JavaScript `window.open` ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਇਹ ਪਹੁੰਚ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਦੇ ਨਾਲ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਖੋਲ੍ਹਣ ਦੇ ਡਿਫੌਲਟ ਵਿਵਹਾਰ ਨੂੰ ਬਦਲਣ ਲਈ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ, ਜੋ ਕਿ ਇੱਕ SharePoint ਸੰਦਰਭ ਵਿੱਚ SPFx ਨਾਲ ਬਣੇ ਡਾਇਨਾਮਿਕ ਫਰੰਟ-ਐਂਡ ਹੱਲਾਂ ਲਈ ਆਦਰਸ਼ ਹੈ।
<script>function openInPopup(url) {// Define popup window featuresconst features = 'width=800,height=600,resizable=yes,scrollbars=yes';// Open URL in popupwindow.open(url, '_blank', features);}// Override link behaviordocument.querySelectorAll('a[data-popup="true"]').forEach(function (link) {link.addEventListener('click', function (event) {event.preventDefault(); // Prevent default link behavioropenInPopup(this.href); // Open in popup});});</script>// HTML for the link:<a href="{{slot item @root.slots.PreviewUrl}}" data-popup="true" style="color: {{@root.theme.semanticColors.link}}">{{slot item @root.slots.Destination}}</a>
ਹੱਲ 2: ਇਨਲਾਈਨ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਸਿੱਧੇ ਲਿੰਕ ਟੈਗ ਵਿੱਚ ਜੋੜਨਾ
ਇਹ ਵਿਧੀ HTML ਲਿੰਕ ਟੈਗ ਦੇ ਅੰਦਰ JavaScript ਇਨਲਾਈਨ ਨੂੰ ਏਮਬੈਡ ਕਰਦੀ ਹੈ, ਇਸ ਨੂੰ ਇੱਕ ਹਲਕੇ ਡਾਇਨਾਮਿਕ ਫਰੰਟ-ਐਂਡ ਸਿਸਟਮ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਕੁਝ ਬਾਹਰੀ ਨਿਰਭਰਤਾਵਾਂ ਹਨ।
<a href="{{slot item @root.slots.PreviewUrl}}"onclick="event.preventDefault(); window.open(this.href, '_blank', 'width=800,height=600');"style="color: {{@root.theme.semanticColors.link}}">{{slot item @root.slots.Destination}}</a>// The window.open parameters define the size and behavior of the popup.
ਹੱਲ 3: JavaScript ਇੰਜੈਕਸ਼ਨ ਦੇ ਨਾਲ SPFx ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬੈਕਐਂਡ ਪਹੁੰਚ
ਇਹ ਪਹੁੰਚ ਸ਼ੇਅਰਪੁਆਇੰਟ ਫਰੇਮਵਰਕ (SPFx) ਦੀ ਵਰਤੋਂ ਇੱਕ ਕਸਟਮ ਵੈੱਬਪਾਰਟ ਵਿੱਚ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਲਈ ਕਰਦੀ ਹੈ, ਲਿੰਕਾਂ ਨੂੰ JavaScript ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
import { override } from '@microsoft/decorators';import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';export default class PopupWebPart extends BaseClientSideWebPart {@overridepublic render(): void {this.domElement.innerHTML = `<a href="{{slot item @root.slots.PreviewUrl}}" onclick="openPopup(this.href)">{{slot item @root.slots.Destination}}</a>`;}}function openPopup(url: string): void {window.open(url, '_blank', 'width=800,height=600,resizable=yes');}
JavaScript ਪੌਪਅੱਪ ਵਿਵਹਾਰ ਲਈ ਯੂਨਿਟ ਟੈਸਟ
ਯੂਨਿਟ ਟੈਸਟ ਇਸ ਗੱਲ ਦੀ ਗਰੰਟੀ ਦੇ ਸਕਦੇ ਹਨ ਕਿ ਪੌਪਅੱਪ ਕਾਰਜਕੁਸ਼ਲਤਾ ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਵਾਤਾਵਰਣਾਂ ਵਿੱਚ ਇਕਸਾਰ ਹੈ। ਫਰੰਟ-ਐਂਡ ਪ੍ਰਮਾਣਿਕਤਾ ਲਈ ਇੱਥੇ ਇੱਕ ਬੁਨਿਆਦੀ ਜੈਸਮੀਨ ਟੈਸਟ ਹੈ।
describe('Popup Functionality', function() {it('should open the link in a popup window', function() {spyOn(window, 'open');const testUrl = 'http://example.com';openInPopup(testUrl);expect(window.open).toHaveBeenCalledWith(testUrl, '_blank', jasmine.any(String));});});
SPFx ਵਿੱਚ ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਅਤੇ ਡਾਇਨਾਮਿਕ JavaScript ਇੰਜੈਕਸ਼ਨ ਦੀ ਪੜਚੋਲ ਕਰਨਾ
PnP ਮਾਡਰਨ ਸਰਚ ਵੈੱਬਪਾਰਟ (SPFx) ਦੇ ਨਾਲ ਕੰਮ ਕਰਦੇ ਸਮੇਂ, ਡਿਵੈਲਪਰਾਂ ਲਈ ਇੱਕ ਉਪਯੋਗੀ ਵਿਸ਼ੇਸ਼ਤਾ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਵਿਵਸਥਿਤ ਕਰਨ ਦੀ ਯੋਗਤਾ ਹੈ ਕਿ ਤੱਤ, ਜਿਵੇਂ ਕਿ ਲਿੰਕ, ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ। JavaScript ਇਵੈਂਟ ਹੈਂਡਲਿੰਗ ਦੀ ਵਰਤੋਂ ਉਪਭੋਗਤਾ ਇੰਟਰੈਕਸ਼ਨਾਂ ਨੂੰ ਵਿਅਕਤੀਗਤ ਬਣਾਉਣ ਲਈ ਬਹੁਤ ਸਾਰੇ ਵਿਕਲਪ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ। ਲਿੰਕ ਕਲਿੱਕਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਨ ਅਤੇ ਨਿਯੰਤਰਣ ਕਰਨ ਲਈ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਇੱਕ ਵਧੇਰੇ ਇੰਟਰਐਕਟਿਵ ਅਨੁਭਵ ਬਣਾਉਂਦਾ ਹੈ। ਕਲਿਕ ਇਵੈਂਟਾਂ ਨੂੰ ਕੈਪਚਰ ਕਰਕੇ, ਅਸੀਂ ਆਮ ਵਿਵਹਾਰ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰ ਸਕਦੇ ਹਾਂ ਅਤੇ ਇੱਕ ਨਿਯੰਤਰਿਤ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ URL ਖੋਲ੍ਹ ਸਕਦੇ ਹਾਂ। ਇਹ ਉਪਭੋਗਤਾ ਦੀ ਮੌਜੂਦਾ ਟੈਬ ਜਾਂ ਵਿੰਡੋ ਨੂੰ ਪਰੇਸ਼ਾਨ ਕੀਤੇ ਬਿਨਾਂ ਇੱਕ ਨਿਰਵਿਘਨ ਤਬਦੀਲੀ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।
SPFx ਵੈੱਬਪਾਰਟਸ ਵਿੱਚ ਲਿੰਕਾਂ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨ ਲਈ ਵੀ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਕੋਡ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਪਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਸ਼ੇਅਰਪੁਆਇੰਟ ਫਰੇਮਵਰਕ (SPFx) ਵਿਧੀਆਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜਿਵੇਂ ਕਿ @ਓਵਰਰਾਈਡ ਅਤੇ ਰੈਂਡਰ() ਇਸ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ. ਕਸਟਮ JavaScript ਨੂੰ ਸੰਮਿਲਿਤ ਕਰਕੇ, ਡਿਵੈਲਪਰ ਖੋਜ ਨਤੀਜੇ ਆਈਟਮਾਂ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਵੈਬਪਾਰਟ ਵਿੱਚ ਆਪਣੇ ਆਪ ਵਿੱਚ ਮਹੱਤਵਪੂਰਨ ਸੋਧਾਂ ਕੀਤੇ ਬਿਨਾਂ ਬਦਲ ਸਕਦੇ ਹਨ। ਇਹ ਲਚਕਤਾ ਸਾਰੇ ਖੋਜ ਨਤੀਜੇ ਲਿੰਕਾਂ ਲਈ ਗਲੋਬਲ ਐਡਜਸਟਮੈਂਟ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ, ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦੀ ਹੈ ਕਿ ਲੋੜੀਂਦਾ ਵਿਵਹਾਰ — ਜਿਵੇਂ ਕਿ ਇੱਕ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਖੋਲ੍ਹਣਾ — ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਇੱਕਸਾਰ ਹੈ।
ਅੰਤ ਵਿੱਚ, ਕਿਸੇ ਵੀ ਵੈੱਬ-ਅਧਾਰਿਤ ਸਿਸਟਮ ਵਿੱਚ ਕਾਰਗੁਜ਼ਾਰੀ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਮਹੱਤਵਪੂਰਨ ਕਾਰਕ ਹਨ, ਅਤੇ ਇੱਥੇ ਵੀ ਇਹੀ ਸੱਚ ਹੈ। JavaScript ਦੀ ਵਰਤੋਂ ਨੂੰ ਅਨੁਕੂਲ ਬਣਾ ਕੇ ਅਤੇ ਸਰੋਤ-ਅਨੁਭਵ ਗਤੀਵਿਧੀਆਂ ਨੂੰ ਸੀਮਤ ਕਰਕੇ, ਅਸੀਂ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹਾਂ ਕਿ ਇਹਨਾਂ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਦਾ ਪੰਨਾ ਲੋਡ ਸਮੇਂ ਜਾਂ ਜਵਾਬਦੇਹੀ 'ਤੇ ਕੋਈ ਮਹੱਤਵਪੂਰਨ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੈ। ਕੁਸ਼ਲ JavaScript ਵਰਤੋਂ, ਬੈਕਐਂਡ SPFx ਸੋਧਾਂ ਦੇ ਨਾਲ, ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਕੁਰਬਾਨ ਕੀਤੇ ਬਿਨਾਂ ਉੱਚ ਪੱਧਰੀ ਲਚਕਤਾ ਪ੍ਰਦਾਨ ਕਰਦੀ ਹੈ, ਨਤੀਜੇ ਵਜੋਂ ਸ਼ੇਅਰਪੁਆਇੰਟ ਪਲੇਟਫਾਰਮ ਵਿੱਚ ਇੱਕ ਸਹਿਜ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਹੁੰਦਾ ਹੈ।
ਪੌਪਅੱਪ ਲਈ SPFx ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਬਾਰੇ ਆਮ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
- ਮੈਂ JavaScript ਨਾਲ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਇੱਕ ਲਿੰਕ ਕਿਵੇਂ ਖੋਲ੍ਹਾਂ?
- ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ window.open() JavaScript ਵਿੱਚ ਫੰਕਸ਼ਨ. ਇਹ ਫੰਕਸ਼ਨ ਤੁਹਾਨੂੰ ਇੱਕ ਨਵੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੰਡੋ ਖੋਲ੍ਹਣ ਜਾਂ ਖਾਸ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ ਕਿ ਆਕਾਰ ਅਤੇ ਸਕ੍ਰੋਲ ਬਾਰਾਂ ਨਾਲ ਪੌਪਅੱਪ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ।
- ਕੀ ਕਰਦਾ ਹੈ event.preventDefault() ਕਰਦੇ ਹਾਂ?
- ਦ event.preventDefault() ਵਿਧੀ ਇੱਕ ਘਟਨਾ ਨੂੰ ਇਸਦੀ ਡਿਫੌਲਟ ਕਾਰਵਾਈ ਕਰਨ ਤੋਂ ਰੋਕਦੀ ਹੈ। ਇਸ ਸਥਿਤੀ ਵਿੱਚ, ਇਹ ਖਾਸ ਕਾਰਵਾਈਆਂ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੇ ਹੋਏ ਲਿੰਕ ਨੂੰ ਇੱਕ ਨਵੀਂ ਟੈਬ ਵਿੱਚ ਖੋਲ੍ਹਣ ਤੋਂ ਰੋਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਇੱਕ ਪੌਪਅੱਪ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ।
- ਮੈਂ SPFx ਵਿੱਚ ਕਈ ਲਿੰਕਾਂ ਲਈ ਕਸਟਮ ਵਿਵਹਾਰ ਨੂੰ ਕਿਵੇਂ ਲਾਗੂ ਕਰਾਂ?
- ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ querySelectorAll() JavaScript ਵਿੱਚ, ਤੁਸੀਂ ਕਈ ਭਾਗਾਂ ਨੂੰ ਚੁਣ ਸਕਦੇ ਹੋ ਅਤੇ ਉਹਨਾਂ ਨਾਲ ਇਵੈਂਟ ਸਰੋਤਿਆਂ ਨੂੰ ਜੋੜ ਸਕਦੇ ਹੋ, ਇਸ ਗੱਲ ਦੀ ਗਾਰੰਟੀ ਦਿੰਦੇ ਹੋਏ ਕਿ ਉਹ ਸਾਰੇ ਇੱਕੋ ਵਿਹਾਰ ਦੀ ਪਾਲਣਾ ਕਰਦੇ ਹਨ।
- ਮੈਂ SPFx ਵੈਬਪਾਰਟਸ ਦੀ ਡਿਫੌਲਟ ਰੈਂਡਰਿੰਗ ਨੂੰ ਕਿਵੇਂ ਓਵਰਰਾਈਡ ਕਰਾਂ?
- SPFx ਵੈੱਬਪਾਰਟਸ ਦੇ ਵਿਵਹਾਰ ਨੂੰ ਅਨੁਕੂਲ ਕਰਨ ਲਈ, ਦੀ ਵਰਤੋਂ ਕਰੋ @override ਸਜਾਵਟ ਕਰਨ ਵਾਲਾ ਇਹ ਤੁਹਾਨੂੰ ਸਿੱਧਾ ਵੈੱਬਪਾਰਟ ਦੀ ਰੈਂਡਰਿੰਗ ਪ੍ਰਕਿਰਿਆ ਵਿੱਚ ਕਸਟਮ JavaScript ਨੂੰ ਇੰਜੈਕਟ ਕਰਨ ਦੇ ਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।
- ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਤਕਨੀਕ ਕੀ ਹੈ ਕਿ ਕੀ ਪੌਪਅੱਪ ਵਿੰਡੋ ਸਹੀ ਢੰਗ ਨਾਲ ਖੁੱਲ੍ਹਦੀ ਹੈ?
- ਜੈਸਮੀਨ ਵਰਗੇ ਫਰੇਮਵਰਕ ਵਿੱਚ ਯੂਨਿਟ ਟੈਸਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ spyOn() ਨਿਗਰਾਨੀ ਕਰਨ ਲਈ ਜੇਕਰ window.open() ਫੰਕਸ਼ਨ ਨੂੰ ਅਨੁਮਾਨਿਤ ਪੈਰਾਮੀਟਰਾਂ ਨਾਲ ਉਚਿਤ ਤੌਰ 'ਤੇ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।
SPFx ਵਿੱਚ ਪੌਪਅੱਪ ਵਿੰਡੋਜ਼ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਮੁੱਖ ਉਪਾਅ
PnP ਮਾਡਰਨ ਸਰਚ ਵੈੱਬਪਾਰਟ (SPFx) ਦੇ ਅੰਦਰ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੌਪਅੱਪ ਵਿੰਡੋ ਵਿੱਚ ਲਿੰਕ ਖੋਲ੍ਹਣ ਦੇ ਤਰੀਕੇ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਹ ਪਰਿਵਰਤਨ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਰਤਮਾਨ ਟੈਬ 'ਤੇ ਰੁੱਝੇ ਰੱਖਣ ਦੁਆਰਾ ਇੱਕ ਨਿਯੰਤਰਿਤ ਪੌਪਅੱਪ ਵਿੱਚ ਵਿਸਤ੍ਰਿਤ ਸਮਗਰੀ ਤੱਕ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹੋਏ ਆਪਸੀ ਤਾਲਮੇਲ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ।
ਇਕਸਾਰ ਵਿਵਹਾਰ ਨੂੰ ਕਾਇਮ ਰੱਖਣ ਲਈ, ਤਕਨੀਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ event.preventDefault() ਅਤੇ SPFx ਵੈਬਪਾਰਟਸ ਵਿੱਚ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਨੂੰ ਗਤੀਸ਼ੀਲ ਰੂਪ ਵਿੱਚ ਇੰਜੈਕਟ ਕਰੋ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਯੂਨਿਟ ਟੈਸਟਿੰਗ ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ ਕਿ ਇਹ ਤਬਦੀਲੀਆਂ ਬਹੁਤ ਸਾਰੇ ਸੰਦਰਭਾਂ ਵਿੱਚ ਚੰਗੀ ਤਰ੍ਹਾਂ ਕੰਮ ਕਰਦੀਆਂ ਹਨ, ਨਤੀਜੇ ਵਜੋਂ ਸ਼ੇਅਰਪੁਆਇੰਟ ਖੋਜ ਨਤੀਜਾ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਇੱਕ ਭਰੋਸੇਯੋਗ, ਉਪਭੋਗਤਾ-ਅਨੁਕੂਲ ਹੱਲ ਹੁੰਦਾ ਹੈ।
ਹਵਾਲੇ ਅਤੇ ਸਰੋਤ
- PnP ਮਾਡਰਨ ਸਰਚ ਵੈੱਬਪਾਰਟ (SPFx) ਅਤੇ ਅਨੁਕੂਲਿਤ ਲਿੰਕ ਵਿਵਹਾਰ ਸੰਬੰਧੀ ਜਾਣਕਾਰੀ ਅਧਿਕਾਰਤ ਦਸਤਾਵੇਜ਼ਾਂ ਤੋਂ ਪ੍ਰਾਪਤ ਕੀਤੀ ਗਈ ਸੀ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ, 'ਤੇ ਜਾਓ PnP ਆਧੁਨਿਕ ਖੋਜ GitHub ਰਿਪੋਜ਼ਟਰੀ .
- ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਬਾਰੇ ਮਾਰਗਦਰਸ਼ਨ ਜਿਵੇਂ ਕਿ window.open() ਅਤੇ ਘਟਨਾ ਸਰੋਤਿਆਂ ਦਾ ਹਵਾਲਾ ਦਿੱਤਾ ਗਿਆ ਸੀ MDN ਵੈੱਬ ਡੌਕਸ JavaScript ਲਈ.
- SharePoint Framework (SPFx) ਕਸਟਮਾਈਜ਼ੇਸ਼ਨਾਂ ਬਾਰੇ ਵੇਰਵੇ, ਜਿਸ ਵਿੱਚ JavaScript ਇੰਜੈਕਸ਼ਨ ਅਤੇ @ਓਵਰਰਾਈਡ, ਵਿੱਚ ਪਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ਸ਼ੇਅਰਪੁਆਇੰਟ ਫਰੇਮਵਰਕ ਸੰਖੇਪ ਜਾਣਕਾਰੀ .